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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
|
---
title: Element.querySelector()
slug: Web/API/Element/querySelector
tags:
- API
- CSS
- DOM
- Element
- Méthode
- Reference
- Sélecteurs
translation_of: Web/API/Element/querySelector
---
<div>{{APIRef("DOM")}}</div>
<p>Retourne le premier élement parmi les descendant de l'élement sur lequel on l'invoque qui correspond au groupe de sélecteurs spécifiés.</p>
<h2 id="Syntax" name="Syntax">Syntaxe</h2>
<pre class="syntaxbox"><var>element</var> = baseElement.querySelector(<em>selector</em>s);
</pre>
<h3 id="Paramètres">Paramètres</h3>
<dl>
<dt><code>selectors</code></dt>
<dd>est un groupe de <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs">sélecteurs</a> à <span id="result_box" lang="fr"><span>faire correspondre aux éléments descendants du {{domxref("Element")}} <code>baseElement</code> ;</span> <span>cette syntaxe CSS doit être valide ou une exception SyntaxError se produit.</span> <span>Le premier élément trouvé correspondant à ce groupe de sélecteurs est renvoyé.</span></span></dd>
</dl>
<h3 id="Valeur_retournée">Valeur retournée</h3>
<p><span id="result_box" lang="fr"><span>Le premier élément descendant de <code>baseElement</code> qui correspond au groupe de <code>sélectors</code> spécifié.</span> <span>La hiérarchie entière des éléments est considérée lors de la mise en correspondance, y compris ceux qui sont en dehors de l'ensemble des éléments, y compris <code>baseElement</code> et ses descendants;</span> <span>En d'autres termes, les sélecteurs sont d'abord appliqués au document entier, et non à l'élément de base, pour générer une liste initiale d'éléments potentiels.</span> <span>Les éléments résultants sont ensuite examinés pour voir s'ils sont des descendants de <code>baseElement</code>.</span> <span>La première correspondance de ces éléments restants est renvoyée par la méthode <code>querySelector()</code>.</span></span></p>
<p><span lang="fr"><span>Si aucune correspondance n'est trouvée, la valeur retournée est <code>null</code>.</span></span></p>
<h3 id="Exceptions"><span lang="fr"><span>Exceptions</span></span></h3>
<dl>
<dt>SyntaxError</dt>
<dd>Les <code>selectors</code> spécifiés sont invalides.</dd>
</dl>
<h2 id="Example" name="Example">Exemples</h2>
<p>Dans ce premier exemple, est retourné le premier élement {{HTMLElement("style")}} dans le corps du document HTML qui, soit n'a pas de type, soit a le type <code>text/css</code>:</p>
<pre class="brush:js">var el = document.body.querySelector("style[type='text/css'], style:not([type])");
</pre>
<h3 id="Notes" name="Notes">La hiérarchie entière compte</h3>
<p><span id="result_box" lang="fr"><span>Cet exemple montre que la hiérarchie du document entier est prise en compte lors de l'application des <code>selectors</code>, de sorte que les niveaux en dehors du </span></span> <code>baseElement</code> <span lang="fr"><span> spécifié sont toujours pris en compte lors de la recherche des correspondances.</span></span></p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h5</span><span class="punctuation token">></span></span>Original content<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h5</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>
inside paragraph
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>span</span><span class="punctuation token">></span></span>inside span<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></span></span>
inside paragraph
<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h5</span><span class="punctuation token">></span></span>Output<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h5</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> baseElement <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"output"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>innerHTML <span class="operator token">=</span>
<span class="punctuation token">(</span>baseElement<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"div span"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>innerHTML<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
<h4 id="Résultat">Résultat</h4>
<p>Le résultat ressemble à ceci :</p>
<p>{{EmbedLiveSample('The_entire_hierarchy_counts', 600, 160)}}</p>
<h3 id="Notes" name="Notes">Plus d'exemples</h3>
<p>Voir {{domxref("Document.querySelector()")}} pour des exemples supplémentaires du format approprié pour les sélecteurs.</p>
<h2 id="Notes" name="Notes">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">Statut</th>
<th scope="col">Commentaire</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é_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{ CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Fonctionnalité</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatChrome(1)}}</td>
<td>12</td>
<td>{{CompatGeckoDesktop(1.9.1)}}</td>
<td>9<sup>[1]</sup></td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Fonctionnalité</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>Firefox OS (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] <code>querySelector()</code> est pris en charge dans IE 8, mais uniquement pour les sélecteurs CSS 2.1.</p>
<h2 id="See_also" name="See_also">Voir aussi</h2>
<ul>
<li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs">Localisation des éléments DOM avec les sélecteurs</a></li>
<li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut">Sélecteurs d'attribut</a> dans le guide CSS</li>
<li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Sélecteurs d'attribut</a> dans la zone d'apprentissage MDN</li>
<li>{{domxref("element.querySelectorAll()")}}</li>
<li>{{domxref("document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}</li>
<li>{{domxref("DocumentFragment.querySelector()")}} et {{domxref("DocumentFragment.querySelectorAll()")}}</li>
<li>{{domxref("ParentNode.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}}</li>
<li><a href="/en-US/docs/Code_snippets/QuerySelector">Exemples de code pour querySelector</a></li>
<li>autres méthodes qui prennent des sélecteurs : {{domxref("element.closest()")}} et {{domxref("element.matches()")}}.</li>
</ul>
|
