getElementsByName – name-Attribut in Formularen
Das name-Attribut von <input>, <select> und <textarea>-Elementen 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“.
<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");
console.log ("sweet", sweet);
for (const item of sweet) {
item.addEventListener ("click", (evt) => {
document.querySelector (".result").textContent = evt.target.value;
});
}
Ein Blick in die Browser-Konsole zeigt: getElementsByName () gibt eine NodeList zurück. Die 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. Die einzelnen Elemente können ü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
▼ NodeList (3)
0 <input type="radio" name="sweet" checked value="lolly">
1 <input type="radio" name="sweet" value="eis">
2 <input type="radio" name="sweet" value="donut">
▼ NodeList Prototyp
▶ █ constructor: function()
█ entries()
█ forEach()
█ item(index)
█ keys()
█ length
█ values()
█ Symbol(Symbol.iterator)()
█ Symbol(Symbol.toStringTag): "NodeList"
▶ Object Prototyp
Anders als eine HTMLCollection, wie sie von getElementsByClassName () oder getElementsByTagName () zurückgegeben wird, unterstützt die NodeList von getElementsByName Methoden höherer Ordnung. Die Liste kann mit forEach () iteriert werden.
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.
