JavaScript H TML DOM-Sammlungen
Das HTMLCollection-Objekt
Die getElementsByTagName()Methode gibt ein HTMLCollectionObjekt zurück.
Ein HTMLCollectionObjekt ist eine Array-ähnliche Liste (Sammlung) von HTML-Elementen.
Der folgende Code wählt alle <p>Elemente in einem Dokument aus:
Beispiel
const myCollection = document.getElementsByTagName("p");
Auf die Elemente in der Sammlung kann über eine Indexnummer zugegriffen werden.
Um auf das zweite <p>-Element zuzugreifen, können Sie schreiben:
myCollection[1]
Hinweis: Der Index beginnt bei 0.
HTML HTMLCollection-Länge
Die lengthEigenschaft definiert die Anzahl der Elemente in einem HTMLCollection:
Beispiel
myCollection.length
Die lengthEigenschaft ist nützlich, wenn Sie die Elemente in einer Sammlung durchlaufen möchten:
Beispiel
Ändern Sie die Textfarbe aller <p>-Elemente:
const myCollection = document.getElementsByTagName("p");
for (let i = 0; i < myCollection.length; i++) {
myCollection[i].style.color = "red";
}
Eine HTMLCollection ist KEIN Array!
Eine HTMLCollection kann wie ein Array aussehen, ist es aber nicht.
Sie können die Liste durchlaufen und mit einer Zahl auf die Elemente verweisen (wie bei einem Array).
Sie können jedoch keine Array-Methoden wie valueOf(), pop(), push() oder join() für eine HTMLCollection verwenden.