Objekt NodeList je seznam (sbírka) uzlů extrahovaných z dokument.
Objekt NodeList je téměř stejný jako objekt HTMLCollection.
Některé (starší) prohlížeče vracejí místo HTMLCollection objekt NodeList pro metody jako getElementsByClassName().
Všechny prohlížeče vrátí objekt NodeList pro vlastnost childNodes.
Většina prohlížečů vrací objekt NodeList pro metodu querySelectorAll().
Následující kód vybere všechny uzly <p> v dokumentu:
const myNodeList = document.querySelectorAll("p");K prvkům v seznamu NodeList lze přistupovat pomocí indexového čísla.
Pro přístup k druhý uzel <p> můžete napsat:
myNodeList[1]Poznámka: Index začíná na 0.
Vlastnost length definuje počet uzlů v seznamu uzlů:
myNodelist.lengthVlastnost length je užitečná, když chcete procházet uzly v uzlu seznam:
Změňte barvu všech prvků <p> v uzlu seznam:
const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "red";
}Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<p>Hello World!</p>
<p>Hello Norway!</p>
<p>Click the button to change the color of all p elements.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "red";
}
}
</script>
</body>
</html>
NodeList a HTMLcollection jsou v podstatě to samé.
Oba jsou kolekce (seznamy) uzlů (prvků) extrahované z a dokument. K uzlům lze přistupovat pomocí indexových čísel. Index začíná na 0.
Oba mají vlastnost length, která vrací počet prvků v seznamu (kolekci).
HTMLCollection je kolekce prvků dokumentu.
NodeList je kolekce uzlů dokumentu (uzly prvků, uzly atributů a uzly textu).
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.
HTMLCollection je vždy živá kolekce. Příklad: Pokud do seznamu v DOM přidáte prvek
NodeList je nejčastěji statická kolekce. Příklad: Pokud přidáte prvek
getElementsByClassName() a getElementsByTagName() metody vracejí živou kolekci HTML.
Metoda querySelectorAll() vrací statický seznam NodeList.
Vlastnost childNodes vrací aktivní seznam NodeList.
NodeList může vypadat jako pole, ale není.
Můžete procházet seznam NodeList a odkazovat na jeho uzly podle indexu.
Ale nemůžete použít metody Array jako push(), pop() nebo join() na NodeList.