JavaScript HTML DOM Lijst van Knopen

HTML DOM NodeList-object

NodeList Objecten zijn knooppuntenlijsten (collecties) die uit het document worden geëxtraheerd.

NodeList-objecten zijn bijna identiek aan HTMLCollection-objecten.

Als je getElementsByClassName() De methode, sommige (oude) browsers retourneren een NodeList-object in plaats van een HTMLCollection.

Alle browsers retourneren childNodes De eigenschap retourneert een NodeList-object.

De meeste browsers retourneren querySelectorAll() De methode retourneert een NodeList-object.

De volgende code selecteert alle <p>-knooppunten in het document:

Voorbeeld

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

Probeer het zelf uit

Elementen in de NodeList kunnen worden benaderd via hun indexnummer.

Om de tweede <p>-knoop te bereiken, kun je zo schrijven:

y = myNodeList[1];

Opmerking:De index begint bij 0.

Lengte van HTML DOM Node List

length De eigenschap definieert het aantal knooppunten in de knooppuntenlijst:

Voorbeeld

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

Probeer het zelf uit

Voorbeeldverklaring:

  • Maak een lijst van alle <p>-elementen
  • Toon de lengte van deze lijst

length De eigenschap is zeer nuttig wanneer je knooppunten in de knooppuntenlijst wilt doorlopen:

Voorbeeld

Wijzig de achtergrondkleur van alle <p>-elementen in de knooppuntenlijst:

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

Probeer het zelf uit

Het verschil tussen HTMLCollection en NodeList

HTMLCollection (het vorige hoofdstuk) is een verzameling van HTML-elementen.

NodeList is een verzameling van documentknopen.

NodeList en HTML-collecties zijn bijna identiek.

HTMLCollection en NodeList-objecten zijn lijstsoortige objectenlijsten (collecties).

Ze hebben allemaal een gedefinieerde lijst (collectie) met het aantal items. length Eigenschappen.

Ze kunnen allemaal worden bereikt via index (0, 1, 2, 3, 4, ...) zoals een array.

Items in HTMLCollection kunnen worden bereikt via hun naam, id of indexnummer.

Het is mogelijk om items in NodeList te bereiken via hun indexnummer.

Alleen NodeList-objecten kunnen eigenschapsknopen en tekstknopen bevatten.

Een knopenlijst is geen array!

Een knopenarray ziet eruit als een array, maar is het niet.

Je kunt een knopenlijst doorlopen en de knopen erin als een array verwijzen.

Maar, je kunt geen arraymethoden gebruiken op een knopenlijst, zoals valueOf()、push()、pop() of join().