JavaScript/DOM/Document/getElementsByName

Die Methode Document.getElementsByName() greift entsprechend der HTML-Variante des DOM auf ein HTML-Element zu, das ein name-Attribut besitzt. Sie liefert eine sogenannte "live node list" als Rückgabewert, über die der Zugriff auf die gefundenen Elemente ermöglicht wird.

Syntax

let elements = document.getElementsByName(name)

• name: Wert des name-Attributs
• elements: live node list-Collection

Anwendungsbeispiel

Beispiel ansehen …

  function init() {
	let button = document.getElementById('button');
	button.addEventListener('click', auswerten);
	let resett = document.getElementById('resett');
	resett.addEventListener('click', löschen);
  }
  
  function auswerten() {
    if ( document.getElementsByName('Zutat')[0].checked ) {
	  let text = 'Sie haben schon Käse gewählt!';	
	}
	else {
	  let text = 'Käse gehört dazu! Wir haben ihn noch hinzugefügt.';	
	  document.getElementsByName('Zutat')[0].checked = true;
	}
	document.getElementById('kommentar').textContent = text;
  }
	
  function löschen () {
    document.getElementById('kommentar').textContent = '';
  }

Im Beispiel wird eine Gruppe von Checkboxen definiert, die alle den gleichen Namen, nämlich Zutat, haben. Darunter ist ein Klick-Button notiert, bei dessen Anklicken die Funktion Auswerten() aufgerufen wird, die im Dateikopf notiert ist. Im Beispiel hat er type="button", da der Standardwert type="submit" das Formular abschicken würde. Ein zweiter Button mit dem Attribut type="reset" setzt gewählte Einträge auf Wunsch zurück.

Diese Funktion prüft, ob die erste der Checkboxen angekreuzt ist. Durch getElementsByName('Zutat')[0] greift sie auf das erste Element mit name="Zutat" zu. Auch wenn ein solcher Elementname nur einmal im Dokument vorkommt, muss stets mit Array-Syntax auf die Elemente zugegriffen werden. So wäre im Beispiel das Formularelement etwa über getElementsByName('Formular')[0] ansprechbar. Die zweite Checkbox mit dem Namen "Zutat" wäre über getElementsByName('Zutat')[1] ansprechbar, usw.

Beachten Sie: Die Methode getElementsByName() regelt lediglich den Zugriff auf HTML-Elemente. Weitere Möglichkeiten, um HTML-Elemente dynamisch zu beeinflussen, bietet das Node-Objekt an.

Beachten Sie, dass getElementsByName kein Array zurückgibt, sondern eine sogenannte live node list. Man kann mittels einer Schleife die Elemente auslesen, hat aber nicht die Methoden eines Arrays zur Verfügung. Außerdem verändert sich diese live node list, wenn Sie ein Element aus dem DOM entfernen, da diese Liste eben "live" (sprich: "lebendig") ist.

Sie können an diese Methode auch Variablen übergeben. Dazu notieren Sie einfach den Variablennamen ohne Anführungszeichen anstatt eines festen Wertes z. B. getElementsByName(Variablenname). Voraussetzung ist jedoch, dass die Variable auch existiert.

Siehe auch

• JavaScript/Tutorials/Umgang mit Callback-Funktionen

Weblinks

• W3C: getElementsByName
• MDN: Document.getElementsByName