getElementsByName – Zugriff auf Formularfelder über das name-Attribut

getElementsByName – Zugriff über das Name-Attribut

Javascript getElementsByName gibt Elemente mit dem entsprechenden name-Attribut zurück. Das name-Attribut ist für Formularelemente gedacht, die den Namen des Elements zusammen mit dem Wert an Anwendungen auf den Server senden.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

getElementsByName – name-Attribut von Formularfeldern

Das name-Attribut in Formularen kodiert Name-/Wertpaare für eine Anwendung (meist PHP auf dem Server) und ist in der Regel eindeutig – ähnlich dem id-Attribut. Die Ausnahme bilden INPUT-Elemente vom Typ radio, in denen ein gemeinsames name-Attribut eine zusammengehörige Gruppe von Radiobuttons identifiziert, aber auch ein <input type="submit" name="submit" … /> kann mehrfach im Dokument vorkommen – z.B. als Button „Speichern“ und „Vorschau“.

Diese Liste sieht aus wie ein Array, hat einen Index wie ein Array, ist aber kein Array, so dass nicht alle Array-Methoden benutzt werden können. NodeLists sind »Live« – werden Elemente dynamisch hinzugefügt oder entfernt, ändert sich auch die NodeList. Wie bei einer HTML Collection können die einzelnen Elemente über einen Index angesprochen werden, length gibt die Zahl der Elemente zurück und der Index beginnt mit 0. Die Reihenfolge der Elemente entspricht ihrer Reihenfolge im Quelltext.

<input type="radio" name="sweet" value="lolly" checked> 🍭
<input type="radio" name="sweet" value="eis"> 🍧
<input type="radio" name="sweet" value="donut"> 🍩
const sweet = document.getElementsByName ("sweet");
for (const item of sweet) {
	item.addEventListener ("click", (evt) => {
		document.querySelector (".result").textContent = evt.target.value;
	})
}

Eine PHP-Anwendung greift mit $_GET["sweet"] oder $_POST["sweet"] über das Paar name / value direkt auf den Wert der Eingabe in das Feld mit dem name-Attribut zu.

Das name-Attribut

Im Grunde genommen ist getElementsByName nur für die Felder von Formularen zuständig. In den Anfangszeiten des DOM gab es das name-Attribut noch für Elemente, die ein internes Sprungziel darstellten.

<a href="#target">zum Sprungziel</a>
   …
   …
<div name="target">Sprungziel</div>

Mit HTML5 gilt das name-Attribut in vielen Elementen als veraltet und unerwünscht und soll durch ein id-Attribut ersetzt werden. In den modernen Browsern funktioniert dieser alte Konstrukt darum auch nicht mehr, sondern das Sprungziel benutzt das id-Attribut.

Auch in veralteten HTML-Formularen sehen wir vielleicht ab und zu noch ein name-Attribut im form-Tag, das aber immer schon überflüssig war, denn der Wert des name-Attributs im form-Tag wird der Anwendung auf dem Server nicht mitgeliefert.