--- title: Document.querySelectorAll() slug: Web/API/Document/querySelectorAll tags: - API - Cercare elementi - Document - Localizzare Elementi - Referenza - Selettori - Selettori CSS - Selezionare Elementi - Trovare elementi - metodo - querySelectorAll translation_of: Web/API/Document/querySelectorAll ---
{{APIRef("DOM")}}

Il metodo {{domxref("Document")}} querySelectorAll() ritorna una {{domxref("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 {{domxref("ParentNode")}} mixin's {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} method.

Sintassi

elementList = parentNode.querySelectorAll(selectors);

Parametri

selectors
Una {{domxref("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 {{anch("Escaping special characters")}} per maggiori informazioni.

Valore di ritorno

Una {{domxref("NodeList")}} non dinamica contenente un oggetto {{domxref("Element")}} per ogni elemento che corrisponde ad almeno uno dei selettori specificati o una {{domxref("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 {{domxref("NodeList")}} di tutti gli elementi {{HTMLElement("p")}} nel documento:

var matches = document.querySelectorAll("p");

Questo esempio restituisce un elenco di tutti gli elementi {{HTMLElement("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 {{domxref("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 {{domxref("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 {{domxref("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 {{HTMLElement("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 {{cssxref(":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
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}} {{Spec2("DOM WHATWG")}} Standard di vita
{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}} {{Spec2("Selectors API Level 2")}} Nessun cambiamento
{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}} {{Spec2("DOM4")}} Definizione iniziale
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}} {{Spec2("Selectors API Level 1")}} Definizione originale

Compatibilità con i browser

{{Compat("api.Document.querySelectorAll")}}

Vedi anche