HTML DOM NodeList referencehåndbog

NodeList

NodeList er en samling af nodeobjekter, der ligner en array (liste).

Noder i NodeList kan tilgås via indeks (fra 0).

length egenskabReturnerer antallet af noder i NodeList.

NodeList vs. HTMLCollection

NodeList med HTMLCollection Nemlig samme.

Se beskrivelsen nedenfor på siden.

Hvem returnerer NodeList?

childNodes egenskab

querySelectorAll() metoden

getElementsByName() metoden

Egenskaber og metoder

Følgende egenskaber og metoder kan bruges på NodeList:

Navn Beskrivelse
entries() Returner en iterator med nøgle/værdipar fra listen.
forEach() Udfør en callback-funktion for hver node i listen.
item() Returnerer noden ved den angivne indeks.
keys() Returner en iterator ved hjælp af nøglerne i listen.
length Returnerer antallet af noder i NodeList.
values() Returner en iterator ved hjælp af værdierne i listen.

eksempler

Vælg alle <p> Node

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

Elementer i NodeList kan tilgås via indeksnummer.

For at få adgang til den anden <p> node, kan du skrive:

myNodeList[1]

Prøv det selv

Bemærk:Indekset starter fra 0.

HTML DOM Node List Length

length Egenskaber definerer antallet af noder i nodelisten:

Eksempel 1

myNodelist.length

Prøv det selv

Når du vil gennemgå noder i nodelisten:length Egenskaberne er meget nyttige:

Eksempel 2

Skift farven på alle <p> elementer i nodelisten:

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

Prøv det selv

ikke en array

NodeList er ikke en array!

NodeList ser måske ud som en array, men det er ikke tilfældet.

Du kan gennemgå NodeList og bruge indeks til at referere til dens noder.

men du kan ikke bruge arraymetoder på NodeList, såsom push(), pop() eller join().

Forskellen mellem HTMLCollection og NodeList

NodeList med HTMLcollection meget ligner

begge er samlinger af noder (elementer) fra dokumentet, der ligner arrays (lister). Noder kan tilgås gennem indeksnumre. Indekset starter ved 0.

begge har length egenskabdet returnerer antallet af elementer (sæt) i listen (sæt).

HTMLCollection erHTML-dokumentelementsæt.

NodeList er enDokumentknudesæt af (elementknude, egenskabsknude og tekstknude).

HTMLCollection elementer kan tilgås gennem deres navn, id eller indeksnummer.

NodeList elementer kan kun tilgås gennem deres indeksnummer.

HTMLCollection er altid enLivesæt. For eksempel: Hvis du tilføjer et <li> element til en liste i DOM, ændres listen også i HTMLCollection.

NodeList er normalt enStatisksæt. For eksempel: Hvis du tilføjer et <li> element til en liste i DOM, ændres listen ikke i NodeList.

getElementsByClassName() og getElementsByTagName() metoden returnerer en live HTMLCollection.

querySelectorAll() metoden returnerer en statisk NodeList.

childNodes egenskab returnerer en live NodeList.

en live nodeliste

I nogle tilfælde er NodeListLive：DOM ændringer opdaterer NodeList.

childNodes Metoden returnerer en live NodeList.