Listy węzłów JavaScript HTML DOM
Obiekt HTML DOM NodeList
Obiekt NodeList
to lista (kolekcja) węzłów wyodrębnionych z dokumentu.
Przedmiot NodeList
jest prawie taki sam jak HTMLCollection
przedmiot.
Niektóre (starsze) przeglądarki zwracają obiekt NodeList zamiast HTMLCollection dla metod takich jak getElementsByClassName()
.
Wszystkie przeglądarki zwracają obiekt NodeList dla właściwości childNodes
.
Większość przeglądarek zwraca obiekt NodeList dla metody querySelectorAll()
.
Poniższy kod wybiera wszystkie <p>
węzły w dokumencie:
Przykład
const myNodeList = document.querySelectorAll("p");
Dostęp do elementów w NodeList można uzyskać za pomocą numeru indeksu.
Aby uzyskać dostęp do drugiego węzła <p>, możesz napisać:
myNodeList[1]
Uwaga: indeks zaczyna się od 0.
Długość listy węzłów HTML DOM
Właściwość length
definiuje liczbę węzłów na liście węzłów:
Przykład
myNodelist.length
Właściwość length
jest przydatna, gdy chcesz przejść przez węzły na liście węzłów:
Przykład
Zmień kolor wszystkich <p> elementów na liście węzłów:
const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "red";
}
Różnica między HTMLCollection a NodeList
( HTMLCollection
poprzedni rozdział) to zbiór elementów HTML.
A NodeList
to zbiór węzłów dokumentu.
NodeList i kolekcja HTML to bardzo to samo.
Zarówno obiekt HTMLCollection, jak i obiekt NodeList są podobną do tablicy listą (kolekcją) obiektów.
Oba mają właściwość length określającą liczbę pozycji na liście (kolekcji).
Oba zapewniają indeks (0, 1, 2, 3, 4, ...), aby uzyskać dostęp do każdego elementu jak do tablicy.
Dostęp do elementów HTMLCollection można uzyskać po ich nazwie, identyfikatorze lub numerze indeksu.
Dostęp do elementów NodeList można uzyskać tylko po ich numerze indeksu.
Tylko obiekt NodeList może zawierać węzły atrybutów i węzły tekstowe.
Lista węzłów nie jest tablicą!
Lista węzłów może wyglądać jak tablica, ale tak nie jest.
Możesz przeglądać listę węzłów i odnosić się do jej węzłów jak do tablicy.
Nie można jednak używać metod tablicowych, takich jak valueOf(), push(), pop() lub join() na liście węzłów.