Seznamy uzlů JavaScript HTML DOM
Objekt HTML DOM NodeList
Objekt NodeListje seznam (kolekce) uzlů extrahovaných z dokumentu.
Objekt NodeListje téměř stejný jako HTMLCollectionobjekt.
Některé (starší) prohlížeče vracejí objekt NodeList místo HTMLCollection pro metody jako getElementsByClassName().
Všechny prohlížeče vracejí pro vlastnost objekt NodeList childNodes.
Většina prohlížečů vrací pro metodu objekt NodeList querySelectorAll().
Následující kód vybere všechny <p>uzly v dokumentu:
Příklad
const myNodeList = document.querySelectorAll("p");
K prvkům v seznamu NodeList lze přistupovat pomocí indexového čísla.
Pro přístup k druhému uzlu <p> můžete napsat:
myNodeList[1]
Poznámka: Index začíná na 0.
Délka seznamu uzlů HTML DOM
Vlastnost lengthdefinuje počet uzlů v seznamu uzlů:
Příklad
myNodelist.length
Tato lengthvlastnost je užitečná, když chcete procházet uzly v seznamu uzlů:
Příklad
Změňte barvu všech prvků <p> v seznamu uzlů:
const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "red";
}
Rozdíl mezi HTMLCollection a NodeList
( HTMLCollectionpředchozí kapitola) je sbírka prvků HTML.
A NodeListje kolekce uzlů dokumentu.
NodeList a kolekce HTML jsou v podstatě to samé.
Objekt HTMLCollection i objekt NodeList je seznam (kolekce) objektů podobný poli.
Oba mají vlastnost length definující počet položek v seznamu (kolekci).
Oba poskytují index (0, 1, 2, 3, 4, ...) pro přístup ke každé položce jako k poli.
K položkám HTMLCollection lze přistupovat pomocí jejich názvu, ID nebo čísla indexu.
K položkám NodeList lze přistupovat pouze podle jejich indexového čísla.
Pouze objekt NodeList může obsahovat uzly atributů a textové uzly.
Seznam uzlů není pole!
Seznam uzlů může vypadat jako pole, ale není.
Můžete procházet seznamem uzlů a odkazovat na jeho uzly jako na pole.
V seznamu uzlů však nemůžete použít metody pole, jako je valueOf(), push(), pop() nebo join().