JavaScript HTML DOM Knotenlisten

HTML DOM NodeList-Objekt

NodeList Das Objekt ist eine Knotenliste (Sammlung), die aus dem Dokument extrahiert wurde.

NodeList-Objekte und HTMLCollection-Objekte sind fast gleich.

Wenn getElementsByClassName() Die Methode, einige (alte) Browser geben NodeList-Objekte zurück anstatt HTMLCollection.

Alle Browser geben für childNodes Das Attribut gibt ein NodeList-Objekt zurück.

Die meisten Browser geben für querySelectorAll() Die Methode gibt ein NodeList-Objekt zurück.

Das folgende Codeauswahl wählt alle <p>-Knoten im Dokument aus:

Beispiel

var myNodeList = document.querySelectorAll("p");

}

Elemente in der NodeList können über Indexnummern erreicht werden.

Um den zweiten <p>-Knoten zu erreichen, können Sie so schreiben:

y = myNodeList[1];

Anmerkung:Der Index beginnt bei 0.

Länge des HTML DOM Node List

length Das Attribut definiert die Anzahl der Knoten in der Knotenliste:

Beispiel

var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = myNodelist.length;

}

Beispielinterpretation:

  • Erstelle eine Liste aller <p>-Elemente
  • Zeige die Länge dieser Liste an

length Das Attribut ist nützlich, wenn Sie Knoten in der Knotenliste durchlaufen möchten:

Beispiel

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

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

}

Probieren Sie es selbst aus

Unterschied zwischen HTMLCollection und NodeList

HTMLCollection (voriges Kapitel) ist eine Sammlung von HTML-Elementen.

NodeList ist eine Sammlung von Dokumentknoten.

HTMLCollection und NodeList sind Listenobjekte (Sammlungen) von 类数组 Objekten.

Sie haben alle die Anzahl der Elemente in der Liste (Sammlung) definiert. length Eigenschaften.

Sie können alle durch Index (0, 1, 2, 3, 4, ...) wie ein Array auf jede Projekt zugreifen.

Zugriff auf HTMLCollection-Elemente kann durch ihre Namen, ids oder Indexnummern erfolgen.

Zugriff auf NodeList-Elemente kann nur durch ihre Indexnummern erfolgen.

Nur NodeList-Objekte können Attributknoten und Textknoten enthalten.

Knotenlisten sind keine Arrays!

Knotenarrays sehen aus wie Arrays, sind aber nicht.

Sie können Knotenlisten durchlaufen und ihre Knoten wie ein Array referenzieren.

Allerdings können Sie keine Array-Methoden auf Knotenlisten verwenden, wie zum Beispiel valueOf()、push()、pop() oder join().