Metodo querySelectorAll() del Documento DOM HTML

Definizione e uso

querySelectorAll() Il metodo restituisce tutti gli elementi che corrispondono al selettore CSS.

querySelectorAll() Il metodo restituisce un NodeList.

Se il selettore è invalido, allora querySelectorAll() Il metodo solleva SYNTAX_ERR Eccezione.

Esempio

Esempio 1

Selezionare tutti gli elementi con class="example":

document.querySelectorAll(".example");

Prova tu stesso

Esempio 2

Aggiungere un colore di sfondo al primo elemento <p>:

const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";

Prova tu stesso

Esempio 3

Aggiungere un colore di sfondo al primo elemento <p> con class="example":

const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";

Prova tu stesso

Esempio 4

Numero di elementi con class="example":

let numb = document.querySelectorAll(".example").length;

Prova tu stesso

Esempio 5

Impostare il colore di sfondo di tutti gli elementi con class="example":

const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

Prova tu stesso

Esempio 6

Imposta il colore di sfondo di tutti gli elementi <p>.

let nodeList = document.querySelectorAll("p");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

Prova tu stesso

Esempio 7

Imposta il bordo di tutti gli elementi <a> che utilizzano l'attributo "target".

const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.border = "10px solid red";
}

Prova tu stesso

Esempio 8

Imposta il colore di sfondo di ciascun elemento <p> che è figlio di un elemento <div>.

const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

Prova tu stesso

Esempio 9

Imposta il colore di sfondo di tutti gli elementi <h3>, <div> e <span>.

const nodeList = document.querySelectorAll("h3, div, span");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

Prova tu stesso

Sintassi

document.querySelectorAll(CSSselectors)

Parametro

Parametro Descrizione
CSSselectors

Obbligatorio. Un o più selettori CSS.

I selettori CSS scelgono gli elementi HTML in base a id, classe, tipo, attributo, valore dell'attributo, ecc.

Per una lista completa, visita il nostro Manuale di riferimento dei selettori CSS.

Per più selettori, separare ciascun selettore con una virgola (vedi l'esempio sopra).

Valore restituito

Tipo Descrizione
Oggetto

Oggetto NodeList contenente elementi che corrispondono a un selettore CSS.

Se non viene trovato alcun elemento corrispondente, viene restituito un oggetto NodeList vuoto.

La differenza tra HTMLCollection e NodeList

NodeList e HTMLcollection molto simili.

Entrambi sono insiemi di nodi (elementi) simili a array estratti dal documento. I nodi possono essere acceduti tramite l'indice (indice). L'indice parte da 0.

Entrambi hanno length un attributo che restituisce il numero di elementi nella lista (insieme).

HTMLCollection èL'elemento documentodi insieme.

Il NodeList èNodo documentodi elementi nodali, nodi attributo e nodi testo).

I progetti HTMLCollection possono essere acceduti tramite il loro nome, id o numero di indice.

I progetti NodeList possono essere acceduti solo tramite il loro numero di indice.

L'HTMLCollection è sempreIn tempo realedi insieme.

Ad esempio: se si aggiunge un elemento <li> alla lista nel DOM, la lista nell'HTMLCollection cambia anche.

Il NodeList è solitamenteStaticodi insieme.

Ad esempio: se si aggiunge un elemento <li> alla lista nel DOM, la lista nel NodeList non cambia.

getElementsByClassName() e getElementsByTagName() Tutti i metodi restituiscono un HTMLCollection in tempo reale.

querySelectorAll() Il metodo restituisce un NodeList statico.

childNodes L'attributo restituisce un NodeList in tempo reale.

Supporto del browser

document.querySelectorAll() È una caratteristica del DOM Level 3 (2004).

Tutti i browser lo supportano:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Supporto 9-11 Supporto Supporto Supporto Supporto

Pagine correlate

Corso:

Selettori CSS

Manuale di riferimento dei selettori CSS

Corso NodeList JavaScript

Metodo QuerySelector:

Metodo querySelector() dell'Elemento

Metodo querySelectorAll() dell'Elemento

Metodo querySelector() del Documento

Metodo querySelectorAll() del Documento

Metodo GetElement:

Metodo getElementById() del Documento

Metodo getElementsByTagName() del Documento

Metodo getElementsByClassName() del Documento