JavaScript/DOM/Element/getElementsByTagName

Die Methode getElementsByTagName entspricht der gleichnamigen Methode beim document-Objekt, bezieht sich jedoch nicht auf das ganze Dokument, sondern nur auf einen bestimmten Elementknoten. Sie liefert einen Array mit allen Elementknoten eines bestimmten Namens zurück, die sich innerhalb des Elements befinden. Erwartet als Parameter den Namen der gesuchten Elemente als String (z. B. "h1" oder "a").

Syntax

ArrayElemente = Element.getElementsByTagName(tagName)

• tagName: Name des Elements, das gesucht werden soll.
• ArrayElemente: eine live HTML-Collection der gefundenen Elemente.

Anwendungsbeispiel

Beispiel ansehen …

    function holDieElemente() {
      var bereich = document.getElementById('bereich');
      var absaetze = bereich.getElementsByTagName('p');
      var ueberschriften = bereich.getElementsByTagName('h2');
 
      for (var i = 0; i < ueberschriften.length; i++) {
        ueberschriften[i].style.color = 'blue';
      }
 
      for (i = 0; i < absaetze.length; i++) {
        absaetze[i].style.color = 'red';
      }
    }

Im Beispiel sind verschiedene Überschriften und Absätze notiert, von denen eine Überschrift und zwei Absätze in einem {section-Element mit der ID bereich liegen. Im Folgenden sollen alle Überschriften und Absätze innerhalb dieses div-Elements angesprochen und umformatiert werden.

Zunächst wird über document.getElementById() das section-Element angesprochen und der zurückgegebene Elementknoten in der Variable bereich gespeichert Dadurch können wir später mehrmals darauf zuzugreifen, ohne getElementById() mehrmals ausführen zu muss. In den nächsten beiden Zeilen wird die Methode getElementsByTagName() des div-Elementknotens aufgerufen, einmal mit 'p' und einmal mit 'h2'. Diese Aufrufe geben jeweils Arrays mit allen p- bzw. h2-Elementen innerhalb des section-Elements zurück. Diese Arrays werden der Einfachheit halber in den Variablen absaetze und ueberschriften gespeichert, da später mehrfach auf sie zugegriffen wird.

Zuletzt werden beide Arrays mit for-Schleifen durchlaufen. Über ueberschriften[i] bzw. absaetze[i] werden die einzelnen Elementknoten im Array angesprochen. Mithilfe der style-Eigenschaft wird die Textfarbe bei der Überschrift auf blau und bei den Absätzen auf rot gesetzt.

Weblinks

• W3C: [https://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-1938918D getElementsByTagName
• MDN: Element.getElementsByTagName