JavaScript/DOM/Document/getElementsByTagName

Die Methode getElementsByTagName() greift entsprechend dem DOM auf ein beliebiges Element im Elementbaum des Dokuments zu.

Maßgeblich ist dabei der Elementname, in HTML also beispielsweise Namen wie h1, blockquote oder img. Für jeden HTML-Elementtyp wird im Dokument eine "live node list" erzeugt, über die die einzelnen Elemente dann ansprechbar sind.

Syntax

elements = document.getElementsByTagName(name)

• name: Zeichenkette mit dem Namen des HTML-Elements
• elements: HTML-Collection der gefundenen Elemente

Die Methode ist außer für das Dokument-Objekt auch für Objekte mit den Schnittstellen DocumentFragment und Element definiert.

Wenn Sie anstatt des Namen eines HTML-Elementes ein Sternchen "*" als Parameter übergeben, können alle HTML Elemente eines Dokumentes oder Dokumentfragments (bzw. Unter-Elemente eines Elements) angesprochen werden.

Anwendungsbeispiel

Beispiel So sieht's ausQuellcode

<h2>Dynamisch, sehr dynamisch</h2>
<p>Ein erster Absatz</p>
<p>Ein zweiter Absatz</p>
<p>Ein dritter Absatz</p>

<button onclick="neueTexte()">neue Texte</button>

Im Beispiel werden eine Überschrift und drei Textabsätze notiert. Keines dieser Elemente enthält irgendein Attribut, über das es individuell angesprochen werden könnte. Unterhalb davon ist ein Button notiert, bei dessen Anklicken die Funktion neueTexte() aufgerufen wird, die im Dateikopf notiert ist. Diese Funktion ändert dynamisch die Texte aller drei Textabsätze und der Überschrift.

function neueTexte () {
  document.getElementsByTagName('p')[0].firstChild.data = 'neuer erster';
  document.getElementsByTagName('p')[1].firstChild.data = 'neuer zweiter';
  document.getElementsByTagName('p')[2].firstChild.data = 'neuer dritter';
  document.getElementsByTagName('h2')[0].firstChild.data = 'Alles anders';
}

Über document.getElementsByTagName('p')[0] greift sie auf den ersten Textabsatz des Dokuments zu, über document.getElementsByTagName('p')[1] auf den zweiten, über document.getElementsByTagName('h2')[0] auf die erste Überschrift erster Ordnung usw.

Beachten Sie: Die Methode getElementsByTagName() regelt lediglich den Zugriff auf Elemente. Weitere Möglichkeiten, um HTML-Elemente dynamisch zu beeinflussen, bietet das Node-Objekt an. Die Eigenschaft firstChild.data, die im obigen Beispiel verwendet wird, um den im Element enthaltenen Text dynamisch zu ändern, gehört ebenfalls zum Komplex des node-Objekts.

Beachten Sie, dass getElementsByTagName kein Array zurückgibt, sondern eine sogenannte live node list, auch wenn es nur ein Element dieses Namens gibt. 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.

Einsatz in SVG-Dokumenten

Beachten Sie, dass getElementsByTagName die gefundenen Elemente in Kleinbuchstaben (lowercase) übergibt. Wenn Sie in SVG-Dokumenten nach Elementen suchen, verwenden Sie bitte getElementsByTagNameNS(). Hauptartikel: SVG/Anwendung und Praxis/SVG und JavaScript#Attribute mit Namensraumangaben

Siehe auch

• JavaScript/Tutorials/Umgang mit Callback-Funktionen

Weblinks

• W3C: getElementsByTagName
• MDN: document.getElementsByTagName