Il metodo Element
querySelectorAll()
restituisce una NodeList
statica (non dinamica) che rappresenta un elenco di elementi corrispondenti al gruppo specificato di selettori che sono i discendenti dell'elemento su cui è stato chiamato il metodo.
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 essere una stringa di un CSS selector valido; se non lo è, viene generata un'eccezioneSyntaxError
. Vedi Individuazione degli elementi DOM mediante selettori per ulteriori informazioni sull'uso dei selettori per identificare 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 del backspace, è 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 ciascun nodo discendente che corrisponde ad almeno uno dei selettori specificati.
Note: Se i selectors
specificati includono un CSS pseudo-element, l'elenco restituito è sempre vuoto.
Exceptions
SyntaxError
- La sintassi della stringa
selectors
specificata non è valida.
Esempi
Ottenere un elenco di risultati
Per ottenere una NodeList
di tutti gli elementi <p>
contenuti nell'elemento "myBox"
:
var matches = myBox.querySelectorAll("p");
Questo esempio restituisce un elenco di tutti gli elementi <div>
di "myBox"
con la classe "note
" o "alert
":
var matches = myBox.querySelectorAll("div.note, div.alert");
Qui, otteniamo un elenco degli elementi <p>
del documento 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 usa un attribute selector per restituire una lista degli elementi iframe
nel documento che contengono un attributo chiamato "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"
che hanno un 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 restituita la NodeList
degli elementi di corrispondenza, è possibile esaminarlo come qualsiasi array. Se la matrice è vuota (ovvero la sua proprietà length
è 0), non è stata trovata alcuna corrispondenza.
Altrimenti, puoi semplicemente usare la notazione standard per accedere al contenuto della lista. È possibile utilizzare qualsiasi istruzione di loop comune, come ad esempio:
var highlightedItems = userList.querySelectorAll(".highlighted"); highlightedItems.forEach(function(userItem) { deleteUser(userItem); });
Note: NodeList non è un vero array, vale a dire che non ha i metodi dell'array come slice, some, map etc. Per convertirlo in un array, prova Array.from(nodeList)
.
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>
annidati.
<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 il <div>
con la classe "select"
, tsi 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, abbinando solo i selettori 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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
querySelectorAll | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 3.5 | IE
Full support
9
| Opera Full support 10 | Safari Full support 6 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- See implementation notes.
- See implementation notes.
Vedi anche
- Individuazione degli elementi DOM mediante selettori
- Attribute selectors nella guida sul CSS
- Attribute selectors nell'area di apprendimento MDN
Element.querySelector()
Document.querySelector()
eDocument.querySelectorAll()
DocumentFragment.querySelector()
eDocumentFragment.querySelectorAll()
ParentNode.querySelector()
eParentNode.querySelectorAll()
- Snippets per
querySelector()