initial commit

1 files changed, 121 insertions, 0 deletions

diff --git a/files/it/web/api/document/queryselector/index.html b/files/it/web/api/document/queryselector/index.html
new file mode 100644
index 0000000000..6d8000818d
--- /dev/null
+++ b/files/it/web/api/document/queryselector/index.html
@@ -0,0 +1,121 @@
+---
+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>