JavaScript HTML DOM nodlista

HTML DOM NodeList-objekt

NodeList Objekt är en nodlista (samling) som extraherats från dokumentet.

NodeList-objektet är nästan identiskt med HTMLCollection-objektet.

Om du använder getElementsByClassName() metoden, vissa (gamla) webbläsare returnerar NodeList-objekt istället för HTMLCollection.

Alla webbläsare returnerar childNodes egenskapen NodeList-objekt.

De flesta webbläsare returnerar querySelectorAll() Metoden returnerar NodeList-objekt.

Följande kod väljer alla <p>-noder i dokumentet:

Exempel

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

}

Element i NodeList kan åtkommas via indexnummer.

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

y = myNodeList[1];

Kommentar:Index börjar från 0.

Längd på HTML DOM Node List

length Egenskapen definierar antalet noder i nodlistan:

Exempel

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

}

Exempel förklaring:

  • Skapa en lista över alla <p>-element
  • Visa längden på denna lista

length Egenskapen är mycket användbar när du vill iterera över noder i nodlistan:

Exempel

Ändra bakgrundsfärgen för alla <p>-element i nodlistan:

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

}

Prova själv

HTMLCollection och NodeList skiljer sig från varandra

HTMLCollection (i föregående kapitel) är en samling av HTML-element.

NodeList är en samling av dokumentnoder.

HTMLCollection och NodeList-objekt är listor av objekt som liknar arrayer (samlingar).

De har alla en definierad lista (samling) med antalet objekt. length Egenskaper.

De kan båda nå varje projekt genom index (0, 1, 2, 3, 4, ...), som en array.

Åtkomst till HTMLCollection-objekt kan göras genom deras namn, id eller indexnummer.

Åtkomst till NodeList-objekt kan endast göras genom deras indexnummer.

Endast NodeList-objekt kan innehålla egenskapsnoder och textnoder.

Nodlistor är inte arrayer!

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

Du kan traversera nodlistor och referera till dess noder som om de vore en array.

Men du kan inte använda arraymetoder på nodlistor, till exempel valueOf()、push()、pop() eller join().