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
122
123
124
125
126
127
128
129
130
131
|
---
title: Element.querySelector()
slug: Web/API/Element/querySelector
translation_of: Web/API/Element/querySelector
---
<div>{{APIRef("DOM")}}</div>
<p>Il metodo <code><strong>querySelector()</strong></code> dell'interfaccia {{domxref("Element")}} restituisce il primo elemento discendente dell'elemento su cui è invocato corrispondente al gruppo specificato di selettori.</p>
<h2 id="Sintassi">Sintassi</h2>
<pre class="syntaxbox"><var>var element</var> = <em>baseElement</em>.querySelector(<em>selector</em>s);
</pre>
<h3 id="Parameters">Parameters</h3>
<dl>
<dt><code>selectors</code></dt>
<dd>Un gruppo di selettori per abbinare gli elementi discendenti di {{domxref ("Element")}} <code>baseElement</code> contro; questa deve essere una sintassi CSS valida o si verificherà un <code>SyntaxError</code>. Viene restituito il primo elemento trovato che corrisponde a questo gruppo di selettori.</dd>
</dl>
<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
<p>Il primo elemento discendente di <code>baseElement</code> che corrisponde al gruppo specificato di <code>selectors</code>. L'intera gerarchia di elementi viene considerata durante la corrispondenza, inclusi quelli esterni all'insieme di elementi, incluso <code>baseElement</code> e i suoi discendenti; in altre parole, <code>selectors</code> viene prima applicato all'intero documento, non a <code>baseElement</code>, per generare un elenco iniziale di elementi potenziali. Gli elementi risultanti vengono quindi esaminati per vedere se sono discendenti di <code>baseElement</code>. La prima corrispondenza di questi elementi rimanenti viene restituita dal metodo <code>querySelector()</code>.</p>
<p>Se non vengono trovate corrispondenze, il valore restituito è <code>null</code>.</p>
<h3 id="Eccezioni">Eccezioni</h3>
<dl>
<dt><code>SyntaxError</code></dt>
<dd>I <code>selectors</code> specificati non sono validi.</dd>
</dl>
<h2 id="Esempi">Esempi</h2>
<p>Consideriamo alcuni esempi.</p>
<h3 id="Trova_un_elemento_specifico_con_valori_specifici_di_un_attributo">Trova un elemento specifico con valori specifici di un attributo</h3>
<p>In questo primo esempio, viene restituito il primo elemento {{HTMLElement("style")}} che non ha né il tipo né il tipo "text/css" nel corpo del documento HTML:</p>
<pre class="brush:js">var el = document.body.querySelector("style[type='text/css'], style:not([type])");
</pre>
<h3 id="L'intera_gerarchia_conta">L'intera gerarchia conta</h3>
<p>Questo esempio dimostra che la gerarchia dell'intero documento è considerata quando si applicano i <code>selectors</code>, in modo che i livelli al di fuori di <code>baseElement</code> specificato siano ancora considerati quando si localizzano le corrispondenze.</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><div>
<h5>Original content</h5>
<p>
inside paragraph
<span>inside span</span>
inside paragraph
</p>
</div>
<div>
<h5>Output</h5>
<div id="output"></div>
</div></pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js">var baseElement = document.querySelector("p");
document.getElementById("output").innerHTML =
(baseElement.querySelector("div span").innerHTML);</pre>
<h4 id="Risultato">Risultato</h4>
<p>Il risultato è simile a questo:</p>
<p>{{ EmbedLiveSample("L'intera_gerarchia_conta", 600, 160) }}</p>
<p>Nota come il selettore <code>"div span"</code> corrisponda ancora correttamente all'elemento {{HTMLElement("span")}} anche se il<br>
i nodi figli di <code>baseElement</code> non includono l'elemento {{domxref("div")}} (fa ancora parte del selettore specificato).</p>
<h3 id="More_examples">More examples</h3>
<p>Vedi {{domxref("Document.querySelector()")}} per ulteriori esempi del formato corretto per i <code>selectors</code>.</p>
<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','querySelector()')}}</td>
<td>{{Spec2('DOM WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}</td>
<td>{{Spec2('Selectors API Level 2')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}</td>
<td>{{Spec2('Selectors API Level 1')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
<p>{{Compat("api.Element.querySelector")}}</p>
<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="https://developer.mozilla.org/it/docs/Web/CSS/Attribute_selectors">Selettori di attributi</a> nella guida sul CSS</li>
<li><a href="https://developer.mozilla.org/it/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Selettori di attributi</a> nell'Area di apprendimento MDN</li>
<li>{{domxref("Element.querySelectorAll()")}}</li>
<li>{{domxref("Document.querySelector()")}} and {{domxref("Document.querySelectorAll()")}}</li>
<li>{{domxref("DocumentFragment.querySelector()")}} and {{domxref("DocumentFragment.querySelectorAll()")}}</li>
<li>{{domxref("ParentNode.querySelector()")}} and {{domxref("ParentNode.querySelectorAll()")}}</li>
<li><a href="/en-US/docs/Code_snippets/QuerySelector">Snippets per querySelector</a></li>
<li>Other methods that take selectors: {{domxref("element.closest()")}} and {{domxref("element.matches()")}}.</li>
</ul>
|
