JavaScript HTML DOM-Sammlung

Dieses Kapitel führt in die Verwendung von DOM-Sammlungen ein.

HTMLCollection-Objekt

Die Methode getElementsByTagName() gibtHTMLCollectionein Objekt zurück.

Das HTMLCollection-Objekt ähnelt einem Array, das HTML-Elemente enthält.

Der folgende Code ruft alle <p>-Elemente im Dokument ab:

Beispiele

var x = document.getElementsByTagName("p");

Auf Elemente in einer Sammlung kann über den Index zugegriffen werden (beginnend bei 0).

Um auf das zweite <p>-Element zuzugreifen, können Sie den folgenden Code verwenden:

y = x[1];

Selbst ausprobieren »

length-Eigenschaft des HTMLCollection-Objekts

Die length-Eigenschaft des HTMLCollection-Objekts definiert die Anzahl der Elemente in der Sammlung.

Beispiele

var myCollection = document.getElementsByTagName("p"); document.getElementById("demo").innerHTML = myCollection.length;

Selbst ausprobieren »

Beispielanalyse

Rufen Sie die Sammlung der <p>-Elemente ab:

var myCollection = document.getElementsByTagName("p");

Zeigen Sie die Anzahl der Elemente in der Sammlung an:

document.getElementById("demo").innerHTML = myCollection.length;

Die length-Eigenschaft der Sammlung wird häufig verwendet, um die Elemente in einer Sammlung zu durchlaufen.

Beispiele

Ändern Sie die Hintergrundfarbe aller <p>-Elemente:

var myCollection = document.getElementsByTagName("p"); var i; for (i = 0; i < myCollection.length; i++) { myCollection[i].style.backgroundColor = "red"; }

Selbst ausprobieren »

Hinweis

HTMLCollection ist kein Array!

HTMLCollection sieht vielleicht wie ein Array aus, aber es ist keins.

Sie können Indizes verwenden, um Elemente genau wie bei einem Array abzurufen.

HTMLCollection kann keine Array-Methoden verwenden: valueOf(), pop(), push() oder join().

Andere Erweiterungen