Lista węzłów JavaScript HTML DOM
- Poprzednia strona Kolekcja DOM
- Następna strona JS Window
Obiekt NodeList HTML DOM
NodeList Obiekt jest listą węzłów (zbiorów) wyodrębnionych z dokumentu.
Obiekty NodeList są prawie takie same jak obiekty HTMLCollection.
Jeśli używasz getElementsByClassName()
metoda, niektóre (starsze) przeglądarki mogą zwracać NodeList obiekt zamiast HTMLCollection.
Wszystkie przeglądarki zwracają childNodes
atrybut zwraca obiekt NodeList.
Większość przeglądarek zwraca querySelectorAll()
Metoda zwraca obiekt NodeList.
Poniższy kod wybiera wszystkie węzły <p> w dokumencie:
Przykład
var myNodeList = document.querySelectorAll("p");
Elementy NodeList można uzyskać za pomocą numeru indeksu.
Aby uzyskać dostęp do drugiego węzła <p>, możesz napisać tak:
y = myNodeList[1];
Komentarz:Indeksy zaczynają się od 0.
Długość Node List HTML DOM
length
Atrybut definiuje liczbę węzłów w liście węzłów:
Przykład
var myNodelist = document.querySelectorAll("p"); document.getElementById("demo").innerHTML = myNodelist.length;
Przykład wyjaśnienia:
- Utwórz listę wszystkich elementów <p>
- Wyświetl długość tej listy
length
Atrybut jest bardzo użyteczny, gdy chcesz przechodzić przez węzły w liście węzłów:
Przykład
Zmień kolor tła wszystkich elementów <p> w liście węzłów:
var myNodelist = document.querySelectorAll("p"); var i; for (i = 0; i < myNodelist.length; i++) { myNodelist[i].style.backgroundColor = "red"; }
Spróbuj sam
Różnica między HTMLCollection a NodeList
HTMLCollection (z poprzedniego rozdziału) to kolekcja elementów HTML.
NodeList to kolekcja węzłów dokumentu.
Obiekty HTMLCollection i NodeList są obiektami list (kolekcjami) typowymi dla tablic.
Wszystkie mają zdefiniowaną liczbę elementów w zbiorze (kolekcji). length
Atrybuty.
Oba można uzyskać dostęp do każdego elementu za pomocą indeksu (0, 1, 2, 3, 4, ...), jak do tablicy.
Dostęp do elementów HTMLCollection można uzyskać poprzez ich nazwę, id lub indeks.
Dostęp do elementów NodeList można uzyskać tylko przez ich indeksy.
Tylko obiekt NodeList może zawierać węzły atrybutów i węzły tekstowe.
Lista węzłów nie jest tablicą!
Tablica węzłów wygląda jak tablica, ale to nie jest tablica.
Możesz przechodzić przez listę węzłów i odnosić się do ich węzłów jak do tablicy.
Jednak nie możesz używać metod tablicowych do listy węzłów, takich jak valueOf()
,push()
,pop()
lub join()
.
- Poprzednia strona Kolekcja DOM
- Następna strona JS Window