---
title: Document.querySelector()
slug: Web/API/Document/querySelector
translation_of: Web/API/Document/querySelector
---
<div>{{ApiRef("DOM")}}</div>

<p>Il metodo {{domxref("Document")}} <code><strong>querySelector()</strong></code> ritorna il primo {{domxref("Element")}} all'interno del documento che corrisponde al selettore specificato o al gruppo di selettori. Se non vengono trovate corrispondenze, viene restituito <code>null</code>.</p>

<div class="note">
<p><strong>Note</strong>: Il matching viene eseguito utilizzando il deep-pre-order traversal dei nodi del documento partendo dal primo elemento nel markup del documento e iterando attraverso i nodi sequenziali per ordine del numero di nodi figli.</p>
</div>

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

<pre class="syntaxbox notranslate"><var>element</var> = document.querySelector(<var>selectors</var>);
</pre>

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

<dl>
 <dt><var>selectors</var></dt>
 <dd>Una {{domxref("DOMString")}} contenente uno o più selettori da trovare. Questa stringa deve essere una stringa di selettore CSS valida; se non lo è, viene generata un'eccezione <code>SYNTAX_ERR</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 sui selettori e su come gestirli.</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, 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>Un oggetto {{domxref ("Element")}} che rappresenta il primo elemento nel documento che corrisponde al set specificato di <a href="/en-US/docs/Web/CSS/CSS_Selectors">CSS selectors</a>, o <code>null</code> viene restituito se non ci sono corrispondenze.</p>

<p>Se hai bisogno di un elenco di tutti gli elementi che corrispondono ai selettori specificati, dovresti usare {{domxref("Document.querySelectorAll", "querySelectorAll()")}}.</p>

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

<dl>
 <dt><code>SYNTAX_ERR</code></dt>
 <dd>La sintassi dei <em>selettori</em> specificati non è valida.</dd>
</dl>

<h2 id="Note_di_utilizzo">Note di utilizzo</h2>

<p>Se il selettore specificato corrisponde a un ID erroneamente utilizzato più di una volta nel documento, viene restituito il primo elemento con quell'ID.</p>

<p>Gli <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elementi CSS</a> non restituiranno mai alcun elemento, come specificato nelle <a href="http://www.w3.org/TR/selectors-api/#grammar">API dei selettori.</a></p>

<h3 id="Escaping_caratteri_speciali">Escaping caratteri speciali</h3>



<p>Per eseguire la corrispondenza con un ID o selettori che non seguono la sintassi CSS standard (ad esempio utilizzando due punti o uno spazio in modo inappropriato), è necessario eseguire l'escape del carattere con un backslash ("\"). Poiché il backslash è anche un carattere di escape in JavaScript, se si immette una stringa letterale, è necessario eseguire l'escape due volte (una per la stringa JavaScript e un'altra per querySelector ()):</p>

<pre class="brush: html notranslate">&lt;div id="foo\bar"&gt;&lt;/div&gt;
&lt;div id="foo:bar"&gt;&lt;/div&gt;

&lt;script&gt;
  console.log('#foo\bar');               // "#fooar" (\b è il carattere di controllo backspace)
  document.querySelector('#foo\bar');    // Non corrisponde a nulla

  console.log('#foo\\bar');              // "#foo\bar"
  console.log('#foo\\\\bar');            // "#foo\\bar"
  document.querySelector('#foo\\\\bar'); // Seleziona il primo div

  document.querySelector('#foo:bar');    // Non corrisponde a nulla
  document.querySelector('#foo\\:bar');  // Seleziona il secondo div</pre>

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

<h3 id="Trovare_il_primo_elemento_che_corrisponde_a_una_classe">Trovare il primo elemento che corrisponde a una classe</h3>

<p>In questo esempio, viene restituito il primo elemento del documento con la classe "<code>myclass</code>":</p>

<pre class="brush: js notranslate">var el = document.querySelector(".myclass");
</pre>

<h3 id="Un_selettore_più_complesso">Un selettore più complesso</h3>

<p>I selettori possono anche essere molto potenti, come dimostrato nel seguente esempio. Qui, il primo elemento {{HTMLElement("input")}} con il nome "login" (<code>&lt;input name="login"/&gt;</code>) situato all'interno di un {{HTMLElement("div")}} la cui classe è "user-panel main" (<code>&lt;div class="user-panel main"&gt;</code>) nel documento viene restituito:</p>

<pre class="brush: js notranslate">var el = document.querySelector("div.user-panel.main input[name='login']");
</pre>

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

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specifica</th>
   <th scope="col">Stato</th>
   <th scope="col">Commento</th>
  </tr>
  <tr>
   <td>{{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}</td>
   <td>{{Spec2("Selectors API Level 2")}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
   <td>{{Spec2("Selectors API Level 1")}}</td>
   <td>Definizione iniziale</td>
  </tr>
 </tbody>
</table>

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



<div>{{Compat("api.Document.querySelector")}}</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>{{domxref("Element.querySelector()")}}</li>
 <li>{{domxref("Document.querySelectorAll()")}}</li>
 <li>{{domxref("Element.querySelectorAll()")}}</li>
 <li><a href="/en-US/docs/Code_snippets/QuerySelector">Snippet di codice per querySelector</a></li>
</ul>