Podręcznik HTML DOM NodeList

NodeList

NodeList jest zbiorowiskiem obiektów węzłów podobnym do tablicy (listy).

Węzły w NodeList można uzyskać za pomocą indeksu (zaczynając od 0).

length właściwośćZwraca liczbę węzłów w NodeList.

NodeList vs. HTMLCollection

NodeList w porównaniu do HTMLCollection Prawie to samo.

Zobacz wyjaśnienia poniżej strony.

Kto zwraca NodeList?

Atrybut childNodes

Metoda querySelectorAll()

Metoda getElementsByName()

Atrybuty i metody

Możesz używać poniższych atrybutów i metod na NodeList:

Nazwa Opis
entries() Zwraca iterator z pary klucz/wartość z listy.
forEach() Wykonaj funkcję zwrotną dla każdego węzła w liście.
item() Zwraca węzeł w określonym indeksie.
keys() Zwróć iterator za pomocą kluczy z listy.
length Zwraca liczbę węzłów w NodeList.
values() Zwróć iterator za pomocą wartości z listy.

przykłady

Wybierz wszystkie <p> Węzeł:

const myNodeList = document.querySelectorAll("p");

Elementy w NodeList można uzyskać za pomocą numeru indeksu.

Aby uzyskać dostęp do drugiego węzła <p>, możesz napisać:

myNodeList[1]

Spróbuj sam!

Uwaga:Indeksy zaczynają się od 0.

Długość Listy Węzłów HTML DOM

length Atrybut definiuje liczbę węzłów w liście węzłów:

Przykład 1

myNodelist.length

Spróbuj sam!

Kiedy chcesz przechodzić przez węzły w liście węzłów:length Atrybuty są bardzo przydatne:

Przykład 2

Zmień kolor wszystkich elementów <p> w liście węzłów:

const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
  myNodelist[i].style.color = "red";
}

Spróbuj sam!

Nie jest tablicą

NodeList nie jest tablicą!

NodeList może wyglądać jak tablica, ale to nie jest prawda.

Możesz przechodzić przez NodeList i używać wskaźników do odniesienia do węzłów.

Ale nie możesz używać metod tablicy na NodeList, takich jak push(), pop() lub join().

Różnice między HTMLCollection a NodeList

NodeList i HTMLcollection Bardzo podobne.

Oba są zbiorami węzłów (elementów) z dokumentu, podobnymi do tablicy, które można uzyskać za pomocą indeksu. Indeks zaczyna się od 0.

Oba mają length właściwośćktóra zwraca liczbę elementów (zbiorów) w liście. Właściwość length.

HTMLCollection jestelement dokumentuzborem.

NodeList jestwęzeł dokumentuzbioru (węzły elementowe, węzły atrybutów i węzły tekstowe).

Projekty HTMLCollection można uzyskać poprzez ich nazwę, id lub numer indeksu.

Elementy NodeList można uzyskać tylko poprzez ich numer indeksu.

HTMLCollection zawsze jest rodzajemBieżącykolekcji. Na przykład: jeśli dodasz element <li> do listy w DOM, lista w HTMLCollection również się zmieni.

NodeList zazwyczaj jest rodzajemStatycznykolekcja. Na przykład: jeśli dodasz element <li> do listy w DOM, lista w NodeList nie zmieni się.

getElementsByClassName() i getElementsByTagName() Metoda zwraca bieżący HTMLCollection.

querySelectorAll() Metoda zwraca statyczny NodeList.

childNodes Właściwość zwraca bieżący NodeList.

żywą listą węzłów

W niektórych przypadkach NodeList jestBieżący：Zmiany w DOM będą aktualizować NodeList.

childNodes Metoda zwraca bieżący NodeList.