Document.querySelectorAll()

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.

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

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.

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

Compatibilità con i 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() e Element.querySelectorAll()
• Document.querySelector()
• DocumentFragment.querySelector() e DocumentFragment.querySelectorAll()
• ParentNode.querySelector() e ParentNode.querySelectorAll()
• Code snippets for querySelector()