Metodo querySelectorAll() dell'Elemento DOM HTML

Definizione e uso

querySelectorAll() Il metodo restituisce una raccolta di elementi figli corrispondenti al selettore CSS specificato, come oggetto NodeList statico.

NodeList

NodeList è una raccolta di nodi (lista) di tipo array-like.

I nodi nella lista possono essere acceduti tramite l'indice (indice). L'indice parte da 0.

L'attributo length restituisce il numero di nodi nella lista.

Vedi anche：

Manuale di riferimento：

Proprietà classList

Proprietà className

Metodo querySelector()

Metodo getElementsByTagName()

Metodo getElementsByClassName()

Oggetto Style HTML DOM

Guida:

Sintassi CSS

Selettore CSS

Manuale di riferimento dei selettori CSS

Esempio

Esempio 1

设置 <div> 元素中 class="example" 的第一个元素的背景颜色：

// 获取 id="myDIV" 的元素（div），然后获取 div 中 class="example" 的的所有元素
var x = document.getElementById("myDIV").querySelectorAll(".example"); 
// 设置 div 中第一个 class="example" (index 0) 的元素的背景颜色
x[0].style.backgroundColor = "red";

Prova tu stesso

Suggerimento：Più esempi sono disponibili nella pagina sottostante.

Sintassi

element.querySelectorAll(cssSelectors)

Parametri

Parametri Descrizione
cssSelectors

Obbligatorio. Stringa. Specifica uno o più selettori CSS per abbinare gli elementi.

I selettori CSS vengono utilizzati per selezionare elementi HTML in base a id, classe, tipo, attributi, valori degli attributi, ecc.

Per più selettori, separa ogni selettore con una virgola.

Suggerimento：Per una lista completa di tutti i selettori CSS, consulta la nostra Manuale di riferimento dei selettori CSS。

Dettagli tecnici

Valore di ritorno：

L'oggetto NodeList rappresenta tutti i discendenti degli elementi corrispondenti al selettore CSS specificato.

NodeList è una raccolta statica, il che significa che le modifiche nel DOM non hanno impatto sulla raccolta.

Attenzione:Se il selettore specificato non è valido, viene lanciata l'eccezione SYNTAX_ERR
Versione DOM： Documentazione dei Selettori Livello 1 Document Object

Più esempi

Esempio 2

获取 <div> 元素内的所有 <p> 元素，并设置第一个 <p> 元素（索引 0）的背景颜色：

// Ottenere l'elemento (div) con id="myDIV" e ottenere tutti gli elementi <p> all'interno di div
var x = document.getElementById("myDIV").querySelectorAll("p"); 
// 设置 div 中第一个 <p> 元素（索引 0）的背景颜色
x[0].style.backgroundColor = "red";

Prova tu stesso

Esempio 3

获取 <div> 中 class="example" 的所有 <p> 元素，并设置第一个 <p> 元素的背景：

// Ottenere l'elemento (div) con id="myDIV" e ottenere tutti gli elementi <p> con class="example" all'interno di div
var x = document.getElementById("myDIV").querySelectorAll("p.example"); 
// Impostare il colore di sfondo del primo elemento <p> con class="example" (indice 0) all'interno di div
x[0].style.backgroundColor = "red";

Prova tu stesso

Esempio 4

Trovare quanti elementi con class="example" ci sono all'interno dell'elemento <div> (usando l'attributo length dell'oggetto NodeList):

/* Ottenere l'elemento (div) con id="myDIV" e ottenere tutti gli elementi <p> con class="example" all'interno di div, restituire il numero di elementi trovati */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

Prova tu stesso

Esempio 5

Impostare il colore di sfondo di tutti gli elementi con class="example" all'interno dell'elemento <div>:

// Ottenere l'elemento (div) con id="myDIV" e ottenere tutti gli elementi con class="example" all'interno di div
var x = document.getElementById("myDIV").querySelectorAll(".example");
// Creare un ciclo for e impostare il colore di sfondo di tutti gli elementi con class="example" all'interno di div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Prova tu stesso

Esempio 6

Impostare il colore di sfondo di tutti gli elementi <p> all'interno dell'elemento <div>:

// Ottenere l'elemento (div) con id="myDIV" e ottenere tutti gli elementi <p> all'interno di div
var x = document.getElementById("myDIV").querySelectorAll("p");
// Creare un ciclo for e impostare il colore di sfondo di tutti gli elementi <p> all'interno di div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Prova tu stesso

Esempio 7

Impostare lo stile dei bordi degli elementi <a> con l'attributo target all'interno dell'elemento <div>:

// Ottenere l'elemento (div) con id="myDIV" e ottenere tutti gli elementi <a> con l'attributo "target" all'interno di div
var x = document.getElementById("myDIV").querySelectorAll("a[target]");
// Crea un ciclo for e imposta il bordo di tutti gli elementi <a> con l'attributo target all'interno di div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.border = "10px solid red";
}

Prova tu stesso

Esempio 8

Imposta il colore di sfondo di tutti gli elementi <h2>, <div> e <span> all'interno di <div>:

// Ottieni l'elemento con id="myDIV" (div) e ottieni tutti gli elementi <h2>, <div> e <span> all'interno di <div>
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// Crea un ciclo for e imposta il colore di sfondo di tutti gli elementi <h2>, <div> e <span> all'interno di <div>
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Prova tu stesso

Supporto del browser

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 3.2 10.0

Attenzione:Internet Explorer 8 supporta i selettori CSS2. Le versioni IE9 e superiori supportano anche CSS3.

Pagine correlate

Corso CSS:Selettore CSS

Manuale CSS:Manuale di riferimento dei selettori CSS

Corso JavaScript:JavaScript HTML DOM Node List

Manuale JavaScript:element.querySelector()

Manuale HTML DOM:document.querySelectorAll()