Metoda querySelectorAll() Dokumentu DOM

Definicja i użycie

querySelectorAll() Metoda zwraca wszystkie elementy pasujące do selektora CSS.

querySelectorAll() Metoda zwraca NodeList.

Jeśli selektor jest niewłaściwy, to querySelectorAll() Metoda może rzucać SYNTAX_ERR Wyjątek.

Przykład

Przykład 1

Wybierz wszystkie elementy z class="example":

document.querySelectorAll(".example");

Spróbuj sam

Przykład 2

Dodaj kolor tła do pierwszego elementu <p>:

const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";

Spróbuj sam

Przykład 3

Dodaj kolor tła do pierwszego elementu <p> z class="example":

const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";

Spróbuj sam

Przykład 4

Liczba elementów class="example":

let numb = document.querySelectorAll(".example").length;

Spróbuj sam

Przykład 5

Ustawienie koloru tła dla wszystkich elementów class="example":

const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

Spróbuj sam

Przykład 6

Ustaw kolor tła dla wszystkich elementów <p>.

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

Spróbuj sam

Przykład 7

Ustaw obramowanie dla wszystkich elementów <a> używających atrybutu "target".

const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.border = "10px solid red";
}

Spróbuj sam

Przykład 8

Ustaw kolor tła dla każdego elementu <p> będącego potomkiem elementu <div>.

const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

Spróbuj sam

Przykład 9

Ustaw kolor tła dla wszystkich elementów <h3>, <div> i <span>.

const nodeList = document.querySelectorAll("h3, div, span");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

Spróbuj sam

Gramatyka

document.querySelectorAll(CSSselectors)

Parametr

Parametr Opis
CSSselectors

Wymagane. Jedna lub więcej CSS selectorów.

CSS selector wybiera elementy HTML na podstawie id, klasy, typu, atrybutów, wartości atrybutów itp.

Aby uzyskać pełną listę, odwiedź naszą Przewodnik do selektorów CSS.

Dla wielu selektorów, rozdziel każdy selektor przecinkiem (zobacz przykład powyżej).

Zwracana wartość

Typ Opis
Obiekt

Obiekt NodeList zawierający elementy pasujące do selektora CSS.

Zwraca pusty obiekt NodeList, jeśli nie znaleziono pasujących elementów.

Różnica między HTMLCollection a NodeList

NodeList i HTMLcollection bardzo podobne.

oba są zbiorami podobnymi do tablic, które zawierają węzły (elementy) wyodrębnione z dokumentu. Węzły można uzyskać za pomocą indeksów (indeksów). Indeksy zaczynają się od 0.

oba mają length właściwością, która zwraca liczbę elementów w liście (zbiorze).

HTMLCollection jestelement dokumentuzbiór.

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

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

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

HTMLCollection zawsze jestrzeczywistyzbiór.

Na przykład: jeśli dodać element <li> do listy w DOM, lista w HTMLCollection również ulegnie zmianie.

NodeList zazwyczaj jestStatycznyzbiór.

Na przykład: jeśli dodać element <li> do listy w DOM, lista w NodeList nie ulegnie zmianie.

getElementsByClassName() i getElementsByTagName() Metoda zwraca rzeczywisty HTMLCollection.

querySelectorAll() Metoda zwraca statyczny NodeList.

childNodes Właściwość zwraca rzeczywisty NodeList.

Wspierane przeglądarki

document.querySelectorAll() Jest to cecha DOM Level 3 (2004).

Wszystkie przeglądarki wspierają to:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Wsparcie 9-11 Wsparcie Wsparcie Wsparcie Wsparcie

Strony związane

Kurs:

Selektory CSS

Przewodnik do selektorów CSS

Kurs NodeList JavaScript

Metoda QuerySelector:

Metoda querySelector() elementu

Metoda querySelectorAll() elementu

Metoda querySelector() dokumentu

Metoda querySelectorAll() dokumentu

Metoda GetElement:

Metoda getElementById() dokumentu

Metoda getElementsByTagName() dokumentu

Metoda getElementsByClassName() dokumentu