HTML DOM querySelectorAll() Method

Esempio

Impostare il colore del primo elemento con class = "example" sfondo all'interno di un <div> elemento:

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

Prova tu stesso "

Più "Try it Yourself" esempi di seguito.

Definizione e l'utilizzo

Il querySelectorAll() metodo restituisce un insieme di elementi figlio di un elemento che corrispondono 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 nodi figlio che corrisponde al selettore specificato, allora si può collegare attraverso tutti i nodi 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

element .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, rappresentano tutti elementi discendenti dell'elemento corrente che corrisponde a un CSS specificato selector(s) . NodeList è una collezione statica, il che significa che i cambiamenti nel DOM ha alcun effetto in collezione. Nota: genera un'eccezione se la SYNTAX_ERR specificato selector(s) non è valido

Altri esempi

Esempio

Ottenere tutti <p> elementi all'interno di un <div> elemento, e impostare il colore del primo fondo <p> elemento (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";

Prova tu stesso "

Esempio

Ottenere tutti <p> elementi in un <div> con class = "example", e impostare lo sfondo del primo <p> elemento:

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

Prova tu stesso "

Esempio

Scopri come molti elementi con class = "example" ci sono in un <div> elemento (usando la proprietà length dell'oggetto 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;

Prova tu stesso "

Esempio

Impostare il colore di tutti gli elementi con class = "example" in uno sfondo <div> elemento:

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

Prova tu stesso "

Esempio

Impostare il colore di sfondo di tutte le <p> elementi in un <div> elemento:

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

Prova tu stesso "

Esempio

Impostare lo stile del bordo di tutti gli <a> elementi in un <div> elemento che ha un "target" attributo:

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

Prova tu stesso "

Esempio

Impostare il colore di sfondo tutto <h2>, <div> e <span> elementi in un <div> elemento:

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

Prova tu stesso "