HTML DOM querySelectorAll() Method

Exemplu

Setați culoarea de fond a primului element cu class = „exemplu“ în interiorul unui <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";

Încearcă - l singur »

Mai multe "Try it Yourself" - "Try it Yourself" exemplele de mai jos.

Definiție și utilizare

querySelectorAll() Metoda returnează o colecție de elemente copil unui element care se potrivesc cu un CSS specificat selector(s) , ca un obiect NodeList static.

Obiectul NodeList reprezintă o colecție de noduri. Nodurile pot fi accesate prin numere de index. Indicele începe la 0.

Indicație: Puteți utiliza lungimea proprietatea obiectului NodeList pentru a determina numărul de noduri copil care se potrivește cu selectorul specificat, atunci puteți bucla prin toate nodurile și extrage informațiile pe care le doriți.

Pentru mai multe informații despre CSS selectoare, accesați CSS Căutători Tutorial și noastre CSS Selectori de referință .

Suport pentru browser-

Numerele din tabel specifică prima versiune de browser care acceptă pe deplin metoda.

Metodă
querySelectorAll()	4	9	3.5	3.2	10.0

Notă: Internet Explorer 8 are suport pentru selectoare CSS2. IE9 și versiunile ulterioare au suport pentru CSS3, de asemenea.

Sintaxă

element .querySelectorAll( CSS selectors )

Valorile parametrilor

Parametru	Tip	Descriere
CSS selectors	String	Necesar. Specifică unul sau mai multe selectoare CSS pentru a se potrivi elementului. Acestea sunt folosite pentru a selecta elemente HTML pe baza lor id, clase, tipuri, atribute, valori de atribute, etc. Pentru mai multe selectoare, separați fiecare selector cu o virgulă. Sfat: Pentru o listă a tuturor CSS selectoare, uita - te la nostru CSS Căutători de referință .

Detalii tehnice

DOM Versiune:	Nivelul selectori 1 Document Object
Întoarcere Valoare:	Un obiect NodeList, reprezentând toate elementele descendent al elementului curent care se potrivește cu un CSS specificat selector(s) . NodeList este o colecție statică, ceea ce înseamnă că schimbările în DOM nu are niciun efect în colecție. Notă: o excepție SYNTAX_ERR Aruncări în cazul în care sunt specificate selector(s) este nevalid

Mai multe exemple

Exemplu

Obține toate <p> elemente din interiorul unui <div> element și setați culoarea de fundal a primului <p> elementul (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";

Încearcă - l singur »

Exemplu

Obține toate <p> elemente într - un <div> cu class = „exemplu“, și a stabilit fundalul primului <p> elementul:

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

Încearcă - l singur »

Exemplu

Aflați cât de multe elemente cu class = „exemplu“ există într - un <div> elementul (folosind proprietatea de lungime a obiectului 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;

Încearcă - l singur »

Exemplu

Setați culoarea de fundal a tuturor elementelor cu class = „exemplu“ într - un <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";
}

Încearcă - l singur »

Exemplu

Setați culoarea de fundal a tuturor <p> elemente într - un <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";
}

Încearcă - l singur »

Exemplu

Setați stilul de frontieră tuturor <a> elemente dintr - un <div> element care au o "target" atribut:

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

Încearcă - l singur »

Exemplu

Setați culoarea de fundal a tuturor <h2>, <div> și <span> elemente într - un <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";
}

Încearcă - l singur »