Metoda querySelectorAll() Elementu DOM HTML

Definicja i zastosowanie

querySelectorAll() Metoda zwraca zbiór potomnych elementów pasujących do określonego selektora CSS, jako statyczny obiekt NodeList.

NodeList

NodeList jest kolekcją węzłów, która zachowuje się jak tablica (kolekcja).

Węzły w liście można uzyskać za pomocą indeksu (indeksu). Indeks zaczyna się od 0.

Atrybut length zwraca liczbę węzłów w liście.

Zobacz również:

Podręcznik referencyjny:

Atrybut classList

Atrybut className

Metoda querySelector()

Metoda getElementsByTagName()

Metoda getElementsByClassName()

Obiekt Style HTML DOM

Tutorial:

Gramatyka CSS

Selektor CSS

Podręcznik selektorów CSS

Przykład

Przykład 1

Ustaw kolor tła pierwszego elementu o klasie "example" w elemencie <div>:

// Uzyskaj element (div) o id="myDIV", a następnie uzyskaj wszystkie elementy o klasie "example" w div
var x = document.getElementById("myDIV").querySelectorAll(".example"); 
// Ustaw kolor tła elementu (indeks 0) o klasie "example" w div
x[0].style.backgroundColor = "red";

Spróbuj sam

Wskazówka:Więcej przykładów znajduje się na dole strony.

Gramatyka

element.querySelectorAll(cssSelectors)

Parametry

Parametry Opis
cssSelectors

Wymagane. Ciąg znaków. Określa jeden lub kilka selektorów CSS do dopasowania elementów.

Selektory CSS służą do wyboru elementów HTML na podstawie id, klasy, typu, atrybutów, wartości atrybutów itp.

Dla wielu selektorów, oddzielaj je przecinkami.

Wskazówka:Pełna lista wszystkich selektorów CSS znajduje się w naszej Podręcznik selektorów CSS.

Szczegółowe informacje techniczne

Wartość zwracana:

Obiekt NodeList reprezentuje wszystkie potomne elementy pasujące do określonego selektora CSS.

NodeList jest statycznym zborem, co oznacza, że zmiany w DOM nie mają wpływu na zbiór.

Uwaga:Jeśli określony selektor jest niewłaściwy, rzuca wyjątek SYNTAX_ERR
Wersja DOM: Dokumentacja poziomu 1 Selectors Document Object

Więcej przykładów

Przykład 2

Uzyskaj wszystkie elementy <p> w elemencie <div>, i ustaw kolor tła pierwszego elementu <p> (indeks 0):

// Pobierz element o id="myDIV" (div), a następnie w div pobierz wszystkie elementy p
var x = document.getElementById("myDIV").querySelectorAll("p"); 
// Ustaw kolor tła pierwszego elementu <p> (indeks 0) w div
x[0].style.backgroundColor = "red";

Spróbuj sam

Przykład 3

Uzyskaj wszystkie elementy <p> o klasie "example" w <div>, i ustaw tło pierwszego elementu <p>:

// Pobierz element o id="myDIV" (div), a następnie w div pobierz wszystkie elementy p o class="example"
var x = document.getElementById("myDIV").querySelectorAll("p.example"); 
// Ustaw kolor tła dla pierwszego elementu <p> o class="example" w div (indeks 0)
x[0].style.backgroundColor = "red";

Spróbuj sam

Przykład 4

Wybierz, ile elementów o class="example" znajduje się w elemencie <div> (używając właściwości length obiektu NodeList):

/* Pobierz element o id="myDIV" (div), a następnie w div pobierz wszystkie elementy p o class="example", zwróć liczbę znalezionych elementów */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

Spróbuj sam

Przykład 5

Ustaw kolor tła dla wszystkich elementów class="example" w elemencie <div>:

// Pobierz element o id="myDIV" (div), a następnie w div pobierz wszystkie elementy o class="example"
var x = document.getElementById("myDIV").querySelectorAll(".example");
// Utwórz pętlę for i ustaw kolor tła dla wszystkich elementów class="example" w div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Spróbuj sam

Przykład 6

Ustaw kolor tła dla wszystkich elementów <p> w elemencie <div>:

// Pobierz element o id="myDIV" (div), a następnie w div pobierz wszystkie elementy p
var x = document.getElementById("myDIV").querySelectorAll("p");
// Utwórz pętlę for i ustaw kolor tła dla wszystkich elementów p w div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Spróbuj sam

Przykład 7

Ustaw styl obramowania dla wszystkich elementów <a> z ustawionym atrybutem target w elemencie <div>:

// Pobierz element o id="myDIV" (div), a następnie w div pobierz wszystkie elementy <a> o atrybucie "target"
var x = document.getElementById("myDIV").querySelectorAll("a[target]");
// Utwórz pętlę for i ustaw obramowanie dla wszystkich elementów <a> z atrybutem target
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.border = "10px solid red";
}

Spróbuj sam

Przykład 8

Ustaw kolor tła dla wszystkich elementów <h2>, <div> i <span> w elemencie <div>:

// Pobierz element o id="myDIV" (div) i uzyskaj wszystkie elementy <h2>, <div> i <span> wewnątrz <div>
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// Utwórz pętlę for i ustaw kolor tła dla wszystkich elementów <h2>, <div> i <span> w <div>
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Spróbuj sam

Obsługa przeglądarek

Liczby w tabeli wskazują pierwszą wersję przeglądarki, która w pełni obsługuje ten metodę.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 3.2 10.0

Uwaga:Internet Explorer 8 obsługuje selektory CSS2. IE9 i wyższe wersje obsługują również CSS3.

Strony związane

Tutorial CSS:Selektor CSS

Przeglądarka CSS:Podręcznik selektorów CSS

Tutorial JavaScript:JavaScript HTML DOM Node List

Przeglądarka JavaScript:element.querySelector()

Przeglądarka HTML DOM:document.querySelectorAll()