Documento HTML DOM querySelectorAll()
Esempio
Seleziona tutti gli elementi con class="example":
document.querySelectorAll(".example");
Altri esempi di seguito.
Definizione e utilizzo
Il querySelectorAll()metodo restituisce tutti gli elementi che corrispondono a uno o più selettori CSS.
Il querySelectorAll()metodo restituisce una NodeList .
Il querySelectorAll()metodo genera un'eccezione SYNTAX_ERR se i selettori non sono validi
Esercitazioni:
L'esercitazione sull'elenco dei nodi JavaScript
Metodi QuerySelector:
Il metodo Element querySelector()
Il metodo Element querySelectorAll()
Il metodo Document querySelector()
Il metodo Document querySelectorAll()
Metodi GetElement:
Il metodo Document getElementById()
Elenco nodi HTML DOM / Raccolta HTML
Le differenze tra una HTMLCollection e una NodeList
Una NodeList e una HTMLCollection sono entrambe raccolte (liste) di nodi (elementi) di tipo array estratti da un documento. È possibile accedere ai nodi tramite numeri di indice. L'indice inizia da 0.
Entrambi gli oggetti hanno una proprietà length che restituisce il numero di elementi nell'elenco.
Una HTMLCollection è una raccolta live : se aggiungi un elemento <li> a un elenco nel DOM, anche l'elenco in HTMLCollection cambierà.
Una NodeList è una raccolta statica : se aggiungi un elemento <li> a un elenco nel DOM, l'elenco in NodeList non cambierà.
I metodi getElementsByClassName()e getElementsByTagName()
restituiscono una HTMLCollection.
I metodi querySelector()e querySelectorAll()
restituiscono una NodeList.
Sintassi
document.querySelectorAll(CSS selectors)
Parametri
| Parameter | Description |
| CSS selectors | Required. One or more CSS selectors. CSS selectors select HTML elements based on id, classes, types, attributes, values of attributes etc. For a full list, go to our CSS Selectors Reference. For multiple selectors, separate each selector with a comma (See "More Examples"). |
Valore di ritorno
| Tipo | Descrizione |
| Oggetto | Una NodeList con gli elementi che corrispondono ai selettori CSS. Se non vengono trovate corrispondenze, nullviene restituito. |
Altri esempi
Aggiungi un colore di sfondo al primo elemento <p>:
const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";
Aggiungi un colore di sfondo al primo elemento <p> con class="example":
const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";
Numero di elementi con class="esempio":
let numb = document.querySelectorAll(".example").length;
Imposta 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";
}
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";
}
Imposta il bordo di tutti gli elementi <a> con un attributo "target":
const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.border = "10px solid red";
}
Imposta il colore di sfondo di ogni elemento <p> in cui il genitore è un elemento <div>:
const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
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";
}
Supporto browser
document.querySelectorAll() è una funzionalità DOM di livello 3 (2004).
È completamente supportato in tutti i browser:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |