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.

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

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

Compatibilità con i browser

BCD tables only load in the browser

Vedi anche