1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
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"><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>
|
