HTML DOM NodeList referenshandbok

NodeList

NodeList är en samling av nodobjekt som liknar en array (lista).

Noder i NodeList kan nås via index (från 0).

length-attributReturnerar antalet noder i NodeList.

NodeList vs. HTMLCollection

NodeList jämfört med HTMLCollection Nästan samma.

Se beskrivningen nedan på sidan.

Vem returnerar NodeList?

childNodes egenskap

querySelectorAll() metod

getElementsByName() metod

Egenskaper och metoder

Följande egenskaper och metoder kan användas på NodeList:

Namn Beskrivning
entries() Returnerar en iterator med nyckel/värde-par från listan.
forEach() Kör en callback-funktion för varje nod i listan.
item() Returnerar noden vid specifikt index.
keys() Använd nycklarna i listan för att returnera en iterator.
length Returnerar antalet noder i NodeList.
values() Använd värdena i listan för att returnera en iterator.

exempel

Välj alla <p> Nod:

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

Element i NodeList kan nås via indexnummer.

För att komma åt den andra <p>-noden kan du skriva:

myNodeList[1]

Prova själv

Observera:Index börjar från 0.

HTML DOM Node List Length

length Egenskapen definierar antalet noder i nodlistan:

Exempel 1

myNodelist.length

Prova själv

När du vill traversera noder i nodlistan:length Egenskaper är mycket användbara:

Exempel 2

Ändra färgen på alla <p>-element i nodlistan:

const myNodelist = document.querySelectorAll("p");
för (låt i = 0; i < myNodelist.length; i++) {
  myNodelist[i].style.color = "red";
}

Prova själv

Inte en array

NodeList är inte en array!

NodeList ser ut som en array, men det är inte fallet.

Du kan navigera NodeList och använda index för att referera till dess noder.

Men du kan inte använda arraymetoder på NodeList, som push(), pop() eller join().

Skillnaden mellan HTMLCollection och NodeList

NodeList med HTMLcollection Mycket lika.

Båda är sammansatta av en samling noder (element) som hämtats från dokumentet. Noder kan nås genom indexnummer. Index börjar vid 0.

Båda har length-attributDet returnerar antalet element (samling) i listan.

HTMLCollection ärHTML-dokumentelementSamling.

NodeList ärDokumentnodSamling av (elementnod, egenskapsnod och textnod).

HTMLCollection-objekt kan nås genom deras namn, id eller indexnummer.

NodeList-poster kan endast nås genom deras indexnummer.

HTMLCollection är alltid enRealtimeSamling. Till exempel: om du lägger till ett <li>-element till en lista i DOM, kommer listan i HTMLCollection att förändras.

NodeList är vanligtvis enStatiskSamling. Till exempel: om du lägger till en <li>-element till en lista i DOM, kommer listan i NodeList att förbli oförändrad.

getElementsByClassName() och getElementsByTagName() Metoden returnerar en实时 HTMLCollection.

querySelectorAll() Metoden returnerar en statisk NodeList.

childNodes Egenskapen returnerar en实时 NodeList.

Realtime nodlista

I vissa fall är NodeListRealtime：DOM ändringar uppdaterar NodeList.

childNodes Metoden returnerar en实时 NodeList.