NodeList a HTMLCollection
Proszę poznać różnice między kolekcjami elementów.
NodeList a HTMLCollection to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.
Dwa typy kolekcji
Metody DOM zwracają jeden z dwóch obiektów przypominających listę: NodeList albo HTMLCollection. Wyglądają podobnie, ale różnią się w istotny sposób.
Skąd pochodzi NodeList
Metody querySelectorAll i childNodes zwracają obiekty NodeList. Obiekt zwrócony przez querySelectorAll jest statyczny: stanowi migawkę utworzoną w chwili wyszukiwania.
const items = document.querySelectorAll(".item"); // static NodeListSkąd pochodzi HTMLCollection
Metody getElementsByClassName, getElementsByTagName oraz właściwość children zwracają dynamiczne obiekty HTMLCollection.
const items = document.getElementsByClassName("item"); // live HTMLCollectionStatyczny a dynamiczny
Statyczny NodeList zachowuje pierwotną zawartość nawet po zmianie DOM. Dynamiczny HTMLCollection automatycznie odzwierciedla dodawanie i usuwanie elementów.
const liveList = document.getElementsByClassName("item");
const staticList = document.querySelectorAll(".item");
// add a new .item later:
// liveList.length increases, staticList.length does notObsługa forEach
NodeList ma wbudowaną metodę forEach. HTMLCollection jej nie ma, więc trzeba go przekonwertować albo użyć pętli indeksowanej.
document.querySelectorAll(".item").forEach((el) => {
console.log(el.textContent);
});Żaden z nich nie jest prawdziwą tablicą
Oba obiekty przypominają tablice: mają właściwość length i obsługują dostęp za pomocą indeksu, ale nie mają metod map, filter ani reduce.
const list = document.querySelectorAll(".item");
// list.map is undefinedKonwertowanie za pomocą Array.from
Array.from przekształca dowolną z tych kolekcji w prawdziwą tablicę, udostępniając wszystkie metody tablicowe.
const arr = Array.from(document.querySelectorAll(".item"));
const texts = arr.map((el) => el.textContent);Konwertowanie za pomocą operatora spread
Operator spread to zwięzła alternatywa, która również tworzy prawdziwą tablicę.
const arr = [...document.getElementsByClassName("item")];
const visible = arr.filter((el) => !el.hidden);Pułapka pętli z dynamiczną listą
Usuwanie elementów podczas iterowania po dynamicznym obiekcie HTMLCollection przesuwa indeksy i powoduje pomijanie elementów. Najpierw przekonwertuj kolekcję na tablicę, aby bezpiecznie po niej iterować.
const items = [...document.getElementsByClassName("done")];
items.forEach((el) => el.remove()); // safeIndeksowanie obu typów
Oba typy obsługują indeksowanie liczbowe i właściwość length, więc podstawowy dostęp wygląda tak samo, mimo że ich działanie wewnętrzne się różni.
const a = document.querySelectorAll(".item");
const b = document.getElementsByClassName("item");
console.log(a[0], b[0], a.length, b.length);Wybór właściwego typu
Używaj querySelectorAll, gdy potrzebujesz stabilnej migawki i wbudowanej metody forEach. Korzystaj z dynamicznych kolekcji, gdy konkretnie potrzebujesz, aby lista pozostawała zsynchronizowana z DOM.
Szybkie sprawdzenie
Wskaż różnicę.
Podsumowanie
NodeList (z querySelectorAll) jest statyczny i ma metodę forEach; HTMLCollection (z getElementsByClassName, getElementsByTagName i children) jest dynamiczny i nie ma metody forEach. Żaden z tych typów nie jest prawdziwą tablicą — przed użyciem map/filter/reduce użyj Array.from lub operatora spread, aby przeprowadzić konwersję, a także bezpiecznie iterować podczas modyfikowania kolekcji.
Często zadawane pytania
Czy lekcja „NodeList a HTMLCollection” jest bezpłatna?
Tak — pełny tekst „NodeList a HTMLCollection” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „NodeList a HTMLCollection”?
Proszę poznać różnice między kolekcjami elementów. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?
Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „NodeList a HTMLCollection”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?
Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Wybieranie elementów za pomocą querySelector
- getElementById i getElementsByClassName
- Przechodzenie między rodzicami, dziećmi i rodzeństwem
- NodeList a HTMLCollection