Il metodo Document
querySelectorAll()
ritorna una NodeList
statica (non dinamica) che rappresenta un elenco di elementi del documento che corrispondono al gruppo specificato di selettori.
Note: This method is implemented based on the ParentNode
mixin's querySelectorAll()
method.
Sintassi
elementList = parentNode.querySelectorAll(selectors);
Parametri
selectors
- Una
DOMString
contenente uno o più selettori con cui confrontarsi. Questa stringa deve contenere dei selettori CSS validi; se non lo sono, viene generata un'eccezioneSyntaxError
. Vedi Individuazione degli elementi DOM mediante selettori per ulteriori informazioni sull'uso dei selettori per cercare gli elementi. È possibile specificare più selettori separandoli utilizzando le virgole.
Note: I caratteri che non fanno parte della sintassi CSS standard devono essere sottoposti a escape utilizzando un carattere backslash. Poiché JavaScript utilizza anche l'escape di backslash, è necessario prestare particolare attenzione quando si scrivono stringhe letterali utilizzando questi caratteri. Vedi Escaping special characters per maggiori informazioni.
Valore di ritorno
Una NodeList
non dinamica contenente un oggetto Element
per ogni elemento che corrisponde ad almeno uno dei selettori specificati o una NodeList
vuota in caso di assenza di corrispondenze.
Note: Se i selectors
specificati includono uno pseudo-elemento CSS, l'elenco restituito è sempre vuoto.
Eccezioni
SyntaxError
- La sintassi della stringa
selectors
specificata non è valida.
Esempi
Ottenere un elenco di elementi
Per ottenere una NodeList
di tutti gli elementi <p>
nel documento:
var matches = document.querySelectorAll("p");
Questo esempio restituisce un elenco di tutti gli elementi <div>
all'interno del documento con la classe "note
" o "alert
":
var matches = document.querySelectorAll("div.note, div.alert");
Qui, otteniamo un elenco di elementi <p>
il cui elemento padre immediato è un div
con la classe "highlighted"
e che si trovano all'interno di un contenitore il cui ID è "test"
.
var container = document.querySelector("#test");
var matches = container.querySelectorAll("div.highlighted > p");
Questo esempio utilizza un selettore tramite attributo per restituire un elenco degli elementi iframe
nel documento che contengono un attributo denominato "data-src"
:
var matches = document.querySelectorAll("iframe[data-src]");
Qui, un selettore di attributo viene utilizzato per restituire un elenco degli elementi di elenco contenuti in un elenco il cui ID è "userlist"
con l'attributo "data-active"
il cui valore è "1"
:
var container = document.querySelector("#userlist");
var matches = container.querySelectorAll("li[data-active='1']");
Accedere ai risultati
Una volta che viene restituita la NodeList
degli elementi corrispondenti, è possibile esaminarla come qualsiasi array. Se l'array è vuoto (ovvero la sua proprietà length
è 0), non è stato trovato alcun elemento.
Altrimenti, puoi semplicemente usare la notazione array standard per accedere ai contenuti della lista. È possibile utilizzare qualsiasi istruzione di loop comune, come ad esempio:
var highlightedItems = userList.querySelectorAll(".highlighted");
highlightedItems.forEach(function(userItem) {
deleteUser(userItem);
});
Note dell'utente
querySelectorAll()
si comporta in modo diverso rispetto alle più comuni librerie DOM JavaScript, il che potrebbe portare a risultati imprevisti.
HTML
Considera questo HTML, con i suoi tre blocchi <div>
nidificati.
<div class="outer">
<div class="select">
<div class="inner">
</div>
</div>
</div>
JavaScript
var select = document.querySelector('.select');
var inner = select.querySelectorAll('.outer .inner');
inner.length; // 1, not 0!
In questo esempio, quando si seleziona ".outer .inner"
nel contesto <div>
con la classe "select"
, si trova ancora l'elemento con la classe ".inner"
anche se .outer
non è un discendente dell'elemento base su cui viene eseguita la ricerca (".select"
). Per impostazione predefinita, querySelectorAll()
verifica solo che l'ultimo elemento nel selettore si trovi all'interno dell'ambito di ricerca.
La pseudo-classe :scope
ripristina il comportamento previsto, trova solo i selettori corrispondenti sui discendenti dell'elemento base:
var select = document.querySelector('.select');
var inner = select.querySelectorAll(':scope .outer .inner');
inner.length; // 0
Specifiche
Specifica | Stato | Commento |
---|---|---|
DOM The definition of 'ParentNode.querySelectorAll()' in that specification. |
Living Standard | Standard di vita |
Selectors API Level 2 The definition of 'ParentNode.querySelectorAll()' in that specification. |
Obsolete | Nessun cambiamento |
DOM4 The definition of 'ParentNode.querySelectorAll()' in that specification. |
Obsolete | Definizione iniziale |
Selectors API Level 1 The definition of 'document.querySelector()' in that specification. |
Obsolete | Definizione originale |
Compatibilità con i browser
BCD tables only load in the browser
Vedi anche
- Individuazione degli elementi DOM mediante selettori
- Attribute selectors nella guida sul CSS
- Attribute selectors nell'area di apprendimento di MDN
Element.querySelector()
eElement.querySelectorAll()
Document.querySelector()
DocumentFragment.querySelector()
eDocumentFragment.querySelectorAll()
ParentNode.querySelector()
eParentNode.querySelectorAll()
- Code snippets for
querySelector()