Listy węzłów HTML DOM
Lista węzłów
NodeList to podobna do tablicy kolekcja (lista) obiektów węzła.
Dostęp do węzłów w NodeList można uzyskać za pomocą indeksu (zaczyna się od 0).
zwraca liczbę węzłów w NodeList.
NodeList jest prawie taki sam jak HTMLCollection .
Przykłady
Wiele metod i właściwości zwraca listę węzłów:
Przykład
Wybierz wszystkie <p>węzły w dokumencie:
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ść lengthdefiniuje liczbę węzłów na liście węzłów:
Przykład
myNodelist.length
Właściwość lengthjest 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
( HTMLCollectionpoprzedni rozdział) to zbiór elementów HTML.
A NodeListto 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ć za pomocą ich nazwy, identyfikatora lub numeru 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.