Exemplu
Obține toate elementele din document cu class = „exemplu“:
var x =
document.querySelectorAll(".example"); Încearcă - l singur » Mai multe "Try it Yourself" - "Try it Yourself" exemplele de mai jos.
Definiție și utilizare
querySelectorAll() metoda returneaza toate elementele din document care se potrivește 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 elemente care se potrivește cu selectorul specificat, atunci puteți bucla prin toate elementele ș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ă
document.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 din document care se potrivește cu 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. O excepție SYNTAX_ERR Aruncări dacă selector(s) este nevalid |
Mai multe exemple
Exemplu
Obține toate <p> elemente în document, și setați culoarea de fundal a primului <p> elementul (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"; Încearcă - l singur » Exemplu
Obține toate <p> elemente din document cu class = „exemplu“ și setați fundalul primului <p> elementul:
// 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"; Încearcă - l singur » Exemplu
Aflați cât de multe elemente cu class = „exemplu“ există în documentul (folosind proprietatea de lungime a obiectului NodeList):
var x =
document.querySelectorAll(".example").length; Încearcă - l singur » Exemplu
Setați culoarea de fundal a tuturor elementelor din document cu class = „exemplu“:
var x = document.querySelectorAll(".example");
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 din document:
var x = document.querySelectorAll("p");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} Încearcă - l singur » Exemplu
Setați frontiera tuturor <a> elementelor din document , care au o "target" atribut:
var x = document.querySelectorAll("a[target]");
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 fiecărui <p> elementul în care părintele este un <div> Element:
var x = document.querySelectorAll("div > p");
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 <h2>, <div> și <span> elemente din document:
var x = document.querySelectorAll("h2, div, span");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} Încearcă - l singur » Pagini similare
CSS Tutorial: CSS Căutători
CSS Referință: CSS Căutători de referință
JavaScript Tutorial: Lista HTML JavaScript DOM Node
HTML DOM Reference: Document. querySelector()
HTML DOM Reference: Element. querySelectorAll()