path: root/files/it/web/api/document/queryselectorall/index.html

---
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
---
<div>{{APIRef("DOM")}}</div>

<p>Il metodo {{domxref("Document")}} <code><strong>querySelectorAll()</strong></code> ritorna una {{domxref("NodeList")}} statica (non dinamica) che rappresenta un elenco di elementi del documento che corrispondono al gruppo specificato di selettori.</p>

<div class="note">
<p><strong>Note:</strong> This method is implemented based on the {{domxref("ParentNode")}} mixin's {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} method.</p>
</div>

<h2 id="Sintassi">Sintassi</h2>

<pre class="syntaxbox"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>);
</pre>

<h3 id="Parametri">Parametri</h3>

<dl>
 <dt><code>selectors</code></dt>
 <dd>Una {{domxref("DOMString")}} contenente uno o più selettori con cui confrontarsi. Questa stringa deve contenere dei <a href="/en-US/docs/Web/CSS/CSS_Selectors">selettori CSS</a> validi; se non lo sono, viene generata un'eccezione <code>SyntaxError</code>. Vedi <a href="https://developer.mozilla.org/it/docs/Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors">Individuazione degli elementi DOM mediante selettori</a> per ulteriori informazioni sull'uso dei selettori per cercare gli elementi. È possibile specificare più selettori separandoli utilizzando le virgole.</dd>
</dl>

<div class="note">
<p><strong>Note:</strong> 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.</p>
</div>

<h3 id="Valore_di_ritorno">Valore di ritorno</h3>

<p>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.</p>

<div class="note">
<p><strong>Note:</strong> Se i <code>selectors</code> specificati includono uno <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elemento CSS</a>, l'elenco restituito è sempre vuoto.</p>
</div>

<h3 id="Eccezioni">Eccezioni</h3>

<dl>
 <dt><code>SyntaxError</code></dt>
 <dd>La sintassi della stringa <code>selectors</code> specificata non è valida.</dd>
</dl>

<h2 id="Esempi">Esempi</h2>

<h3 id="Ottenere_un_elenco_di_elementi">Ottenere un elenco di elementi</h3>

<p>Per ottenere una {{domxref("NodeList")}} di tutti gli elementi {{HTMLElement("p")}} nel documento:</p>

<pre class="brush: js">var matches = document.querySelectorAll("p");</pre>

<p>Questo esempio restituisce un elenco di tutti gli elementi {{HTMLElement("div")}} all'interno del documento con la classe "<code>note</code>" o "<code>alert</code>":</p>

<pre class="brush: js">var matches = document.querySelectorAll("div.note, div.alert");
</pre>

<p>Qui, otteniamo un elenco di elementi <code>&lt;p&gt;</code> il cui elemento padre immediato è un {{domxref("div")}} con la classe <code>"highlighted"</code> e che si trovano all'interno di un contenitore il cui ID è <code>"test"</code>.</p>

<pre class="brush: js">var container = document.querySelector("#test");
var matches = container.querySelectorAll("div.highlighted &gt; p");</pre>

<p>Questo esempio utilizza un <a href="/en-US/docs/Web/CSS/Attribute_selectors">selettore tramite attributo</a> per restituire un elenco degli elementi {{domxref("iframe")}} nel documento che contengono un attributo denominato <code>"data-src"</code>:</p>

<pre class="brush: js">var matches = document.querySelectorAll("iframe[data-src]");</pre>

<p>Qui, un selettore di attributo viene utilizzato per restituire un elenco degli elementi di elenco contenuti in un elenco il cui ID è <code>"userlist"</code> con l'attributo <code>"data-active"</code> il cui valore è <code>"1"</code>:</p>

<pre class="brush: js">var container = document.querySelector("#userlist");
var matches = container.querySelectorAll("li[data-active='1']");</pre>

<h3 id="Accedere_ai_risultati">Accedere ai risultati</h3>

<p>Una volta che viene restituita la {{domxref("NodeList")}} degli elementi corrispondenti, è possibile esaminarla come qualsiasi array. Se l'array è vuoto (ovvero la sua proprietà <code>length</code> è 0), non è stato trovato alcun elemento.</p>

<p>Altrimenti, puoi semplicemente usare la notazione array standard per accedere ai contenuti della lista. È possibile utilizzare qualsiasi istruzione di loop comune, come ad esempio:</p>

<pre class="brush: js">var highlightedItems = userList.querySelectorAll(".highlighted");

highlightedItems.forEach(function(userItem) {
  deleteUser(userItem);
});</pre>

<h2 id="Note_dell'utente">Note dell'utente</h2>

<p><code>querySelectorAll()</code> si comporta in modo diverso rispetto alle più comuni librerie DOM JavaScript, il che potrebbe portare a risultati imprevisti.</p>

<h3 id="HTML">HTML</h3>

<p>Considera questo HTML, con i suoi tre blocchi {{HTMLElement("div")}} nidificati.</p>

<pre class="brush: html">&lt;div class="outer"&gt;
  &lt;div class="select"&gt;
    &lt;div class="inner"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js">var select = document.querySelector('.select');
var inner = select.querySelectorAll('.outer .inner');
inner.length; // 1, not 0!
</pre>

<p>In questo esempio, quando si seleziona <code>".outer .inner"</code> nel contesto <code>&lt;div&gt;</code> con la classe <code>"select"</code>, si trova ancora l'elemento con la classe <code>".inner"</code> anche se <code>.outer</code> non è un discendente dell'elemento base su cui viene eseguita la ricerca (<code>".select"</code>). Per impostazione predefinita, <code>querySelectorAll()</code> verifica solo che l'ultimo elemento nel selettore si trovi all'interno dell'ambito di ricerca.</p>

<p>La pseudo-classe {{cssxref(":scope")}} ripristina il comportamento previsto, trova solo i selettori corrispondenti sui discendenti dell'elemento base:</p>

<pre class="brush: js">var select = document.querySelector('.select');
var inner = select.querySelectorAll(':scope .outer .inner');
inner.length; // 0
</pre>

<h2 id="Specifiche">Specifiche</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specifica</th>
   <th scope="col">Stato</th>
   <th scope="col">Commento</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
   <td>{{Spec2("DOM WHATWG")}}</td>
   <td>Standard di vita</td>
  </tr>
  <tr>
   <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
   <td>{{Spec2("Selectors API Level 2")}}</td>
   <td>Nessun cambiamento</td>
  </tr>
  <tr>
   <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
   <td>{{Spec2("DOM4")}}</td>
   <td>Definizione iniziale</td>
  </tr>
  <tr>
   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
   <td>{{Spec2("Selectors API Level 1")}}</td>
   <td>Definizione originale</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>

<div>


<p>{{Compat("api.Document.querySelectorAll")}}</p>
</div>

<h2 id="Vedi_anche">Vedi anche</h2>

<ul>
 <li><a href="https://developer.mozilla.org/it/docs/Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors">Individuazione degli elementi DOM mediante selettori</a></li>
 <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selectors</a> nella guida sul CSS</li>
 <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Attribute selectors</a> nell'area di apprendimento di MDN</li>
 <li>{{domxref("Element.querySelector()")}} e {{domxref("Element.querySelectorAll()")}}</li>
 <li>{{domxref("Document.querySelector()")}}</li>
 <li>{{domxref("DocumentFragment.querySelector()")}} e {{domxref("DocumentFragment.querySelectorAll()")}}</li>
 <li>{{domxref("ParentNode.querySelector()")}} e {{domxref("ParentNode.querySelectorAll()")}}</li>
 <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector">Code snippets for <code>querySelector()</code></a></li>
</ul>