document.
Zwraca statyczną listę (NodeList) wszystkich elementów pasujących do selektora CSS.
- Zwraca
- Statyczną listę
NodeListz pasującymi elementami (może być pusta).
Przykład
#const lessons = document.querySelectorAll('.lesson')
console.log(lessons.length)
lessons.forEach((lesson, index) => {
console.log(`${index + 1}. ${lesson.textContent}`)
})
const done = [...document.querySelectorAll('.lesson.done')].map((li) => li.textContent)
console.log(done)Definicja i zastosowanie
#Metoda querySelectorAll() działa jak querySelector(), ale zwraca wszystkie pasujące elementy w kolejności, w jakiej występują w dokumencie. Wynikiem jest obiekt NodeList, który ma właściwość length, dostęp przez indeks (list[0]) i metodę forEach().
NodeList nie jest tablicą: brakuje mu metod map(), filter() czy reduce(). Zamienisz go na tablicę przez Array.from(list) albo [...list]. Jeśli nic nie pasuje, dostaniesz pustą listę o długości 0, a nie null.
Lista jest statyczna, czyli jest „zdjęciem” dokumentu z chwili wywołania. Elementy dodane później same się w niej nie pojawią, a usuwanie elementów podczas przechodzenia po liście jest bezpieczne.
Składnia
#document.querySelectorAll(selectors)
element.querySelectorAll(selectors)Parametry
#selectors
napis
Selektor CSS. Kilka selektorów oddzielasz przecinkami.
Więcej przykładów
#const items = document.querySelectorAll('li[data-price]')
const total = Array.from(items).reduce((sum, item) => sum + Number(item.dataset.price), 0)
console.log(`Razem: ${total} zł`)const list = document.querySelector('#list')
const items = list.querySelectorAll('li')
list.append(document.createElement('li'))
console.log(items.length)
console.log(list.querySelectorAll('li').length)
console.log(list.children.length)items zapamiętało stan sprzed dodania elementu. Właściwość children to z kolei kolekcja „żywa”, która zawsze pokazuje aktualne dzieci.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Potrzebujesz
map()albofilter()? Zamień wynik na tablicę:[...document.querySelectorAll(".card")]. - Nie sprawdzaj wyniku przez
if (list). Pusta lista też jest obiektem, więc sprawdzajlist.length. - Po dodaniu nowych elementów wywołaj metodę ponownie, bo wcześniej pobrana lista się nie zmienia.
Powiązane hasła
#- document.querySelector()Zwraca pierwszy element pasujący do selektora CSS albo null, gdy nic nie pasuje.
- Array.from()Tworzy tablicę z obiektu iterowalnego lub „tablicopodobnego”.
- Array.prototype.forEach()Wywołuje funkcję dla każdego elementu tablicy.
- Element.classListObiekt do dodawania, usuwania, przełączania i sprawdzania klas CSS elementu.
- Spread (...)Składnia spread rozkłada tablicę, napis lub obiekt na pojedyncze elementy: do kopiowania, łączenia i przekazywania argumentów.
Widzisz błąd albo brakuje przykładu? Napisz do nas.