Element.querySelectorAll()

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.

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'eccezione SyntaxError. 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.

Valore di ritorno

Una NodeList non dinamica contenente un oggetto Element per ciascun nodo discendente che corrisponde ad almeno uno dei selettori specificati.

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 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

Compatibilità con i browser

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() e Document.querySelectorAll()
• DocumentFragment.querySelector() e DocumentFragment.querySelectorAll()
• ParentNode.querySelector() e ParentNode.querySelectorAll()
• Snippets per querySelector()