JavaScript- HTML-DOM-Knotenlisten
Das HTML-DOM-NodeList-Objekt
Ein NodeListObjekt ist eine Liste (Sammlung) von Knoten, die aus einem Dokument extrahiert wurden.
Ein NodeListObjekt ist fast dasselbe wie ein HTMLCollectionObjekt.
Einige (ältere) Browser geben ein NodeList-Objekt anstelle einer HTMLCollection für Methoden wie zurück getElementsByClassName().
Alle Browser geben ein NodeList-Objekt für die Eigenschaft zurück childNodes.
Die meisten Browser geben ein NodeList-Objekt für die Methode zurück querySelectorAll().
Der folgende Code wählt alle <p>Knoten in einem Dokument aus:
Beispiel
const myNodeList = document.querySelectorAll("p");
Auf die Elemente in der NodeList kann über eine Indexnummer zugegriffen werden.
Um auf den zweiten <p>-Knoten zuzugreifen, können Sie schreiben:
myNodeList[1]
Hinweis: Der Index beginnt bei 0.
Länge der HTML-DOM-Knotenliste
Die lengthEigenschaft definiert die Anzahl der Knoten in einer Knotenliste:
Beispiel
myNodelist.length
Die lengthEigenschaft ist nützlich, wenn Sie die Knoten in einer Knotenliste durchlaufen möchten:
Beispiel
Ändern Sie die Farbe aller <p>-Elemente in einer Knotenliste:
const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "red";
}
Der Unterschied zwischen einer HTMLCollection und einer NodeList
Ein HTMLCollection(vorheriges Kapitel) ist eine Sammlung von HTML-Elementen.
A NodeListist eine Sammlung von Dokumentknoten.
Eine NodeList und eine HTML-Sammlung sind sehr ähnlich.
Sowohl ein HTMLCollection-Objekt als auch ein NodeList-Objekt sind eine Array-ähnliche Liste (Sammlung) von Objekten.
Beide haben eine Längeneigenschaft, die die Anzahl der Elemente in der Liste (Sammlung) definiert.
Beide bieten einen Index (0, 1, 2, 3, 4, ...), um auf jedes Element wie auf ein Array zuzugreifen.
Auf HTMLCollection-Elemente kann über ihren Namen, ihre ID oder ihre Indexnummer zugegriffen werden.
Auf NodeList-Elemente kann nur über ihre Indexnummer zugegriffen werden.
Nur das NodeList-Objekt kann Attributknoten und Textknoten enthalten.
Eine Knotenliste ist kein Array!
Eine Knotenliste kann wie ein Array aussehen, ist es aber nicht.
Sie können die Knotenliste durchlaufen und auf ihre Knoten wie auf ein Array verweisen.
Sie können jedoch keine Array-Methoden wie valueOf(), push(), pop() oder join() für eine Knotenliste verwenden.