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.
Inhaltsverzeichnis
Anwendungsbeispiel
<p>Aktuelle Anzahl an Textabsätzen:
<output id="ausgabe"></output>
</p>
<h2>Weitere Textabsätze</h2>
<button>neuen Textabsatz hinzufügen</button>
Im Beispiel werden ein Textabsatz mit einem output-Element, eine Unterüberschrift und ein Button notiert. Es sollen nun alle Textabsätze in einer Variable erfasst werden, die passend paragraphs (Englisch für Textabsätze) genannt wird:
const paragraphs = document.getElementsByTagName("p");
Über document.getElementsByTagName("p") werden alle Textabsätze des Dokuments erfasst und als sogenannte HTMLCollection in der Variable gespeichert. Diese Liste funktioniert ähnlich wie ein Array, denn nun könnte man über paragraphs[0] auf das erste Textabsatz-Objekt zugreifen.
paragraphs ist lebendig! Später dem Dokument hinzugefügte Textabsätze werden automatisch in diese Liste aufgenommen. Sie können dieses im Beispiel daran erkennen, dass die Anzahl Textabsätze, also die length-Eigenschaft des in paragraphs gespeicherten Objekts, beim Betätigen des Buttons hochgezählt wird. Sie sehen auch den neu hinzugefügten Textabsatz unter dem Button.Moderne Alternative zu dieser DOM-Methode
Diese Methode gehört zu den im DOM definierten Möglichkeiten, wie man auf Elemente im Dokument zugreifen kann. Bei der Entwicklung des Standards, der nicht nur für JavaScript im Browser gedacht ist, war die bequeme Web-Programmierung nicht im Vordergrund. Für heutige Projekte mag diese Methode umständlich in der Anwendung sein. Dazu kann ihre dynamische Natur (neue HTML-Elemente werden in die Liste aufgenommen, oder nicht mehr im Dokument verankterte darin gelöscht) zu unerwarteten Nebenwirkungen führen, die bei der Fehlersuche unintuitiv wirken.
Außerdem bietet das von getElementsByTagName zurück gelieferte Objekt keine eigene Methode, um über die Elemente in der Liste zu iterieren (wie z.B. Array.forEach). Deswegen bietet es sich in aller Regel an, stattdessen die document-Methode querySelectorAll zu verwenden.
Einsatz in SVG-Dokumenten
{{Beachten|,|dass getElementsByTagName die gefundenen Elemente in Kleinbuchstaben (lowercase) übergibt. Wenn Sie in SVG-Dokumenten nach Elementen suchen, verwenden Sie bitte getElementsByTagNameNS().
→ SVG und JavaScript (Attribute mit Namensraumangaben)
