Metodo HTML DOM querySelectorAll()

Esempio

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

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

Altri esempi "Provalo da solo" di seguito.

Definizione e utilizzo

Il metodo querySelectorAll() restituisce una raccolta di elementi figlio di un elemento che corrispondono a uno o più selettori CSS specificati, come oggetto statico NodeList.

L'oggetto NodeList rappresenta una raccolta di nodi. È possibile accedere ai nodi tramite numeri di indice. L'indice inizia da 0.

Suggerimento: puoi utilizzare la proprietà length dell'oggetto NodeList per determinare il numero di nodi figlio che corrisponde al selettore specificato, quindi puoi scorrere tutti i nodi ed estrarre le informazioni desiderate.

Per ulteriori informazioni sui selettori CSS, visita il nostro Tutorial sui selettori CSS e il nostro Riferimento sui selettori CSS .

Supporto browser

I numeri nella tabella specificano la prima versione del browser che supporta completamente il metodo.

Method
querySelectorAll()	4.0	9.0	3.5	3.2	10.0

Nota: Internet Explorer 8 supporta i selettori CSS2. IE9 e versioni successive supportano anche CSS3.

Sintassi

element.querySelectorAll(CSS selectors)

Valori dei parametri

Parameter	Type	Description
CSS selectors	String	Required. Specifies one or more CSS selectors to match the element. These are used to select HTML elements based on their id, classes, types, attributes, values of attributes, etc. For multiple selectors, separate each selector with a comma. Tip: For a list of all CSS Selectors, look at our CSS Selectors Reference.

Dettagli tecnici

Versione DOM:	Selettori Livello 1 Oggetto Documento
Valore di ritorno:	Un oggetto NodeList, che rappresenta tutti gli elementi discendenti dell'elemento corrente che corrispondono a uno o più selettori CSS specificati. NodeList è una raccolta statica, il che significa che le modifiche nel DOM NON hanno alcun effetto nella raccolta. Nota: genera un'eccezione SYNTAX_ERR se i selettori specificati non sono validi

Altri esempi

Esempio

Ottieni tutti gli elementi <p> all'interno di un elemento <div> e imposta il colore di sfondo del primo elemento <p> (indice 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";

Esempio

Ottieni tutti gli elementi <p> in un <div> con class="example" e imposta lo sfondo del primo elemento <p>:

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

Esempio

Scopri quanti elementi con class="example" ci sono in un elemento <div> (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;

Esempio

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

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

Esempio

Imposta il colore di sfondo di tutti gli elementi <p> in un elemento <div>:

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

Esempio

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

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

Esempio

Imposta il colore di sfondo di tutti gli elementi <h2>, <div> e <span> in un elemento <div>:

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