Esempio
Ottenere tutti gli elementi del documento con class = "example":
var x =
document.querySelectorAll(".example"); Prova tu stesso " Più "Try it Yourself" esempi di seguito.
Definizione e l'utilizzo
Il querySelectorAll() restituisce tutti gli elementi del documento che corrisponde a un CSS specificato selector(s) , come un oggetto NodeList statico.
L'oggetto NodeList rappresenta un insieme di nodi. I nodi possono essere accessibili da numeri di indice. L'indice parte da 0.
Suggerimento: È possibile utilizzare la lunghezza di proprietà dell'oggetto NodeList per determinare il numero di elementi che corrisponde al selettore specificato, allora è possibile scorrere tutti gli elementi ed estrarre le informazioni che desidera.
Per ulteriori informazioni su CSS selettori, visitare il nostro CSS selettori tutorial e il nostro CSS selettori di riferimento .
Supporto browser
I numeri nella tabella specifica la prima versione del browser che supporta pienamente il metodo.
| Metodo | |||||
|---|---|---|---|---|---|
| querySelectorAll() | 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
Nota: Internet Explorer 8 ha il supporto per i selettori CSS2. IE9 e le versioni successive hanno il supporto per CSS3 pure.
Sintassi
document.querySelectorAll( CSS selectors )valori dei parametri
| Parametro | Tipo | Descrizione |
|---|---|---|
| CSS selectors | String | Necessario. Specifica uno o più selettori CSS per abbinare l'elemento. Questi sono usati per selezionare gli elementi HTML in base alle loro identità, classi, tipi, attributi, valori degli attributi, ecc Per più selettori, separare ogni selettore con una virgola. Suggerimento: per un elenco di tutti i CSS selettori, guardare il nostro CSS selettori di riferimento . |
Dettagli tecnici
| DOM Versione: | Livello I selettori Oggetto 1 Documento |
|---|---|
| Valore di ritorno: | Un oggetto NodeList, che rappresentano tutti gli elementi nel documento che corrisponde alla CSS specificato selector(s) . NodeList è una collezione statica, il che significa che i cambiamenti nel DOM ha alcun effetto in collezione. Genera un'eccezione SYNTAX_ERR se il selector(s) non è valido |
Altri esempi
Esempio
Ottenere tutti <p> elementi nel documento, e impostare il colore del primo fondo <p> elemento (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"; Prova tu stesso " Esempio
Ottenere tutti <p> elementi nel documento con class = "example", e impostare lo sfondo del primo <p> elemento:
// 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"; Prova tu stesso " Esempio
Scopri come molti elementi con class = "example" ci sono nel documento (utilizzando la proprietà length dell'oggetto NodeList):
var x =
document.querySelectorAll(".example").length; Prova tu stesso " Esempio
Impostare il colore di tutti gli elementi del documento con class = "example" background:
var x = document.querySelectorAll(".example");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} Prova tu stesso " Esempio
Impostare il colore di sfondo di tutte le <p> elementi nel documento:
var x = document.querySelectorAll("p");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} Prova tu stesso " Esempio
Impostare il bordo di tutti gli <a> elementi nel documento che hanno un "target" attributo:
var x = document.querySelectorAll("a[target]");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.border = "10px solid red";
} Prova tu stesso " Esempio
Impostare il colore di sfondo di ogni <p> elemento in cui il genitore è un <div> elemento:
var x = document.querySelectorAll("div > p");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} Prova tu stesso " Esempio
Impostare il colore di sfondo di tutte le <h2>, <div> e <span> elementi nel documento:
var x = document.querySelectorAll("h2, div, span");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} Prova tu stesso " Pagine correlate
Tutorial CSS: CSS selettori
CSS Riferimento: CSS selettori di riferimento
JavaScript Tutorial: Lista JavaScript HTML DOM Node
HTML DOM Riferimento: documento. querySelector()
HTML DOM Riferimento: elemento. querySelectorAll()