HTML DOM querySelectorAll() Method

Przykład

Ustaw kolor tła na pierwszy element z class = „przykład” wewnątrz <div> element:

// 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";

Spróbuj sam "

Więcej "Try it Yourself" przykłady poniżej.

Definicja i Wykorzystanie

querySelectorAll() Metoda zwraca kolekcję elementów podrzędnych elementu za pasujących do określonego CSS selector(s) jako statycznego obiektu NodeList.

Przedmiotem NodeList reprezentuje zbiór węzłów. Węzły mogą być dostępne za pomocą numerów indeksowych. Indeks zaczyna się od 0.

Wskazówka: Można użyć length właściwość obiektu NodeList aby określić liczbę węzłów potomnych, który pasuje do określonego wyboru, można pętli wszystkich węzłów i wyodrębnić informacje, które chcesz.

Aby uzyskać więcej informacji na temat CSS selektorów, odwiedź naszą CSS Selectors samouczek i nasze CSS Selectors Reference .

Wsparcie przeglądarka

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

metoda
querySelectorAll()	4.0	9.0	3.5	3.2	10,0

Uwaga: Internet Explorer 8 posiada wsparcie dla selektorów CSS2. IE9 i nowsze wersje mają wsparcie dla CSS3, jak również.

Składnia

element .querySelectorAll( CSS selectors )

wartości parametrów

Parametr	Rodzaj	Opis
CSS selectors	String	Wymagany. Określa jeden lub więcej selektorów CSS dopasować element. Są one wykorzystywane, aby wybrać elementy HTML na podstawie dowodu osobistego, klas, typów atrybutów, wartości atrybutów, etc. Dla wielu selektorów, selektor oddzielić przecinkami. Wskazówka: Aby uzyskać listę wszystkich selektorów CSS, spojrzeć na nasz CSS selektory Reference .

Szczegóły techniczne

DOM wersja:	Poziom selektory 1 Document Object
Zwracana wartość:	Obiekt NodeList reprezentujący wszystkie podrzędne elementy bieżącego elementu, który jest zgodny z określoną CSS selector(s) . NodeList jest zbiorem statyczne, co oznacza, że zmiany w DOM nie ma wpływu w kolekcji. Uwaga: zgłasza wyjątek SYNTAX_ERR jeśli określony selector(s) jest nieważny

Więcej przykładów

Przykład

Zbierz wszystkie <p> elementy wewnątrz <div> elementu i ustaw kolor tła pierwszego <p> elementu (index 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";

Spróbuj sam "

Przykład

Zbierz wszystkie <p> elementy w <div> class = „przykład” i ustawić tło pierwszego <p> element:

// 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";

Spróbuj sam "

Przykład

Dowiedzieć się, jak wiele elementów z class = „przykład” istnieją w <div> elementu (za pomocą 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;

Spróbuj sam "

Przykład

Ustaw kolor tła wszystkich elementów z class = „przykład” w <div> element:

// 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";
}

Spróbuj sam "

Przykład

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

// 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";
}

Spróbuj sam "

Przykład

Ustawić styl obramowania wszystkich <a> elementów w <div> elementu, które mają "target" atrybut:

// 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";
}

Spróbuj sam "

Przykład

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

// 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";
}

Spróbuj sam "