Najnowsze tutoriale tworzenie stron internetowych
 

HTML DOM querySelectorAll() Method

<Document Object

Przykład

Uzyskaj wszystkie elementy w dokumencie z class = „przykład”:

var x = document.querySelectorAll(".example");
Spróbuj sam "

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

Definicja i Wykorzystanie

querySelectorAll() metoda zwraca wszystkie elementy w dokumencie, który jest zgodny z określoną 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ę elementów, które pasuje do określonego wyboru, a następnie można pętli wszystkich elementó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

document.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ących wszystkie elementy w dokumencie, który odpowiada określonej CSS selector(s) . NodeList jest zbiorem statyczne, co oznacza, że ​​zmiany w DOM nie ma wpływu w kolekcji. Zgłasza wyjątek SYNTAX_ERR gdy selector(s) jest nieważny
Przykłady

Więcej przykładów

Przykład

Zbierz wszystkie <p> elementy w dokumencie i ustawić kolor tła pierwszego <p> elementu (index 0) :

// Get all <p> elements in the document
var x = document.querySelectorAll("p");

// Set the background color of the first <p> element
x[0].style.backgroundColor = "red"; 
Spróbuj sam "

Przykład

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

// Get all <p> elements in the document with class="example"
var x = document.querySelectorAll("p.example");

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

Przykład

Dowiedzieć się, jak wiele elementów z class = „przykład” istnieją w dokumencie (za pomocą właściwości length obiektu NodeList):

var x = document.querySelectorAll(".example").length;
Spróbuj sam "

Przykład

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

var x = document.querySelectorAll(".example");
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> elementy w dokumencie:

var x = document.querySelectorAll("p");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}
Spróbuj sam "

Przykład

Ustaw granicę wszystkich <a> elementów w dokumencie, które mają "target" atrybut:

var x = document.querySelectorAll("a[target]");
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 każdego <p> elementu, w którym jednostka dominująca jest <div> Element:

var x = document.querySelectorAll("div > p");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}
Spróbuj sam "

Przykład

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

var x = document.querySelectorAll("h2, div, span");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}
Spróbuj sam "

Podobne strony

CSS: CSS selektory

CSS: CSS selektory referencyjny

JavaScript Tutorial: Lista JavaScript HTML DOM Node

HTML DOM: dokument. querySelector()

HTML DOM: pierwiastek. querySelectorAll()

<Document Object