Metoda HTML DOM querySelectorAll()

Przykład

Ustaw kolor tła pierwszego elementu za pomocą class="example" wewnątrz elementu <div>:

// Get the element with id="myDIV" (a div), then get all elements inside div with class="example"
var x = document.getElementById("myDIV").querySelectorAll(".example");

// Set the background color of the first element with class="example" (index 0) in div
x[0].style.backgroundColor = "red";

Więcej przykładów „Wypróbuj sam” poniżej.

Definicja i użycie

Metoda querySelectorAll() zwraca kolekcję elementów podrzędnych elementu, które pasują do określonych selektorów CSS, jako statyczny obiekt NodeList.

Obiekt NodeList reprezentuje kolekcję węzłów. Dostęp do węzłów można uzyskać za pomocą numerów indeksów. Indeks zaczyna się od 0.

Wskazówka: możesz użyć właściwości length obiektu NodeList, aby określić liczbę węzłów podrzędnych, które pasują do określonego selektora, a następnie możesz przejść przez wszystkie węzły i wyodrębnić żądane informacje.

Więcej informacji na temat selektorów CSS można znaleźć w naszym samouczku dotyczącym selektorów CSS oraz w podręczniku dotyczącym selektorów CSS .

Obsługa przeglądarki

Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę metodę.

Method
querySelectorAll()	4.0	9.0	3.5	3.2	10.0

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

Składnia

element.querySelectorAll(CSS selectors)

Wartości parametrów

Parameter	Type	Description
CSS selectors	String	Required. Specifies one or more CSS selectors to match the element. These are used to select HTML elements based on their id, classes, types, attributes, values of attributes, etc. For multiple selectors, separate each selector with a comma. Tip: For a list of all CSS Selectors, look at our CSS Selectors Reference.

Szczegóły techniczne

Wersja DOM:	Selektory Obiekt dokumentu poziomu 1
Wartość zwrotu:	Obiekt NodeList, reprezentujący wszystkie elementy potomne bieżącego elementu, które pasują do określonych selektorów CSS. NodeList jest kolekcją statyczną, co oznacza, że zmiany w DOM NIE mają żadnego wpływu na kolekcję. Uwaga: Zgłasza wyjątek SYNTAX_ERR, jeśli określone selektory są nieprawidłowe

Więcej przykładów

Przykład

Pobierz wszystkie elementy <p> wewnątrz elementu <div> i ustaw kolor tła pierwszego elementu <p> (indeks 0):

// Get the element with id="myDIV" (a div), then get all p elements inside div
var x = document.getElementById("myDIV").querySelectorAll("p");

// Set the background color of the first <p> element (index 0) in div
x[0].style.backgroundColor = "red";

Przykład

Pobierz wszystkie elementy <p> w <div> z class="example" i ustaw tło pierwszego elementu <p>:

// Get the element with id="myDIV" (a div), then get all p elements with class="example" inside div
var x = document.getElementById("myDIV").querySelectorAll("p.example");

// Set the background color of the first <p> element with class="example" (index 0) in div
x[0].style.backgroundColor = "red";

Przykład

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

/* Get the element with id="myDIV" (a div), then get all p elements with class="example" inside div, and return the number of elements found */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

Przykład

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

// Get the element with id="myDIV" (a div), then get all elements with class="example" inside div
var x = document.getElementById("myDIV").querySelectorAll(".example");

// Create a for loop and set the background color of all elements with class="example" in div
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}

Przykład

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

// Get the element with id="myDIV" (a div), then get all p elements inside div
var x = document.getElementById("myDIV").querySelectorAll("p");

// Create a for loop and set the background color of all p elements in div
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}

Przykład

Ustaw styl obramowania wszystkich elementów <a> w elemencie <div>, które mają atrybut „target”:

// Get the element with id="myDIV" (a div), then get all <a> elements with a "target" attribute inside div
var x = document.getElementById("myDIV").querySelectorAll("a[target]");

// Create a for loop and set the border of all <a> elements with a target attribute in div
var i;
for (i = 0; i < x.length; i++) {
x[i].style.border = "10px solid red";
}

Przykład

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

// Get the element with id="myDIV" (a div), then get all <h2>, <div> and <span> elements inside <div>
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");

// Create a for loop and set the background color of all <h2>, <div> and <span> elements in <div>
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}