diff options
Diffstat (limited to 'files/it/web/api/document/queryselector/index.html')
| -rw-r--r-- | files/it/web/api/document/queryselector/index.html | 121 |
1 files changed, 0 insertions, 121 deletions
diff --git a/files/it/web/api/document/queryselector/index.html b/files/it/web/api/document/queryselector/index.html deleted file mode 100644 index 6d8000818d..0000000000 --- a/files/it/web/api/document/queryselector/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -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"><div id="foo\bar"></div> -<div id="foo:bar"></div> - -<script> - 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><input name="login"/></code>) situato all'interno di un {{HTMLElement("div")}} la cui classe è "user-panel main" (<code><div class="user-panel main"></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> |