JavaScript HTML DOM nodelister

HTML DOM NodeList-objektet

NodeList Objekter er node lists (samlinger) udtrukket fra dokumentet.

NodeList-objekter er næsten ens med HTMLCollection-objekter.

Hvis du bruger getElementsByClassName() metoden, nogle (gamle) browsere returnerer NodeList-objekt i stedet for HTMLCollection.

Alle browsere returnerer childNodes egenskaben NodeList-objektet.

De fleste browsere returnerer querySelectorAll() Metoden returnerer NodeList-objektet.

Følgende kode vælger alle <p>-noder i dokumentet:

Eksempel

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

}

Elementer i NodeList kan tilgås via indeksnummer.

Hvis du vil tilgå den anden <p>-node, kan du skrive det sådan:

y = myNodeList[1];

Bemærk:Indekset starter fra 0.

Længden af HTML DOM Node List

length Egenskaben definerer antallet af noder i nodelisten:

Eksempel

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

}

Eksempel på forklaring:

  • Opret en liste over alle <p>-elementer
  • Vis længden af denne liste

length Egenskaben er meget nyttig, når du vil gennemgå noder i nodelisten:

Eksempel

Ændre baggrundsfar på alle <p>-elementer i nodelisten:

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

}

Prøv det selv

Forskellen mellem HTMLCollection og NodeList

HTMLCollection (i det foregående kapitel) er en samling af HTML-elementer.

NodeList er en samling af dokumentknuder.

HTMLCollection og NodeList-objekter er klassiske array-lignende objekt-lister (sæt).

De har alle en defineret liste (sæt) med antallet af elementer. length Egenskaber.

De kan alle nås gennem indekset (0, 1, 2, 3, 4, ...) som en array.

Adgang til HTMLCollection-elementer kan gøres gennem deres navn, id eller indeksnummer.

Adgang til NodeList-elementer kan kun gøres gennem deres indeksnummer.

Kun NodeList-objekter kan indeholde egenskabsnoder og tekstnoder.

Node-listen er ikke en array!

Node-array ser ud som en array, men er det ikke.

Du kan gennemgå node-listen og referere til dens noder som en array.

Men du kan ikke bruge arraymetoder på node-listen, såsom valueOf()、push()、pop() eller join().