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
|
---
title: document.querySelector
slug: Web/API/Document/querySelector
tags:
- API
- CSS
- DOM
- Document
- JavaScript
- Méthodes
- Sélecteurs
- Échappement
translation_of: Web/API/Document/querySelector
---
<div>{{ ApiRef("DOM") }}</div>
<p>La méthode <code><strong>querySelector()</strong></code> de l'interface {{domxref("Document")}} retourne le premier {{domxref("Element")}} dans le document correspondant au sélecteur - ou groupe de sélecteurs - spécifié(s), ou <code>null</code> si aucune correspondance n'est trouvée.</p>
<div class="note">
<p><strong>Note :</strong> La correspondance est effectuée en utilisant le parcours pré-ordonné profondeur-d'abord des nœuds du document, en partant du premier élément dans le balisage du document et en itérant à travers les nœuds en séquence, par ordre du compte de nœuds enfants.</p>
</div>
<h2 id="Syntax">Syntaxe</h2>
<pre class="brush: js">element = document.querySelector(sélecteurs);
</pre>
<h3 id="Paramètres">Paramètres</h3>
<dl>
<dt><code>selectors</code> (sélecteurs)</dt>
<dd>une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) qui contient un ou plusieurs sélecteurs à comparer. La chaîne doit être composée de sélecteurs CSS valides ; sinon une exception <code>SYNTAX_ERR</code> est lancée. Voir <a href="/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> pour plus d'informations sur les sélecteurs et leur gestion.</dd>
</dl>
<div class="note">
<p><strong>Note :</strong> les caractères qui n'appartiennent pas à la syntaxe standard CSS doivent être échappés par un antislash ("\"). Puisque JavaScript utilise aussi cette barre pour l'échappement, une attention particulière est nécessaire quand des chaînes comprennent ces caractères. Voir {{anch("Caractère spécial d'échappement")}} pour plus d'informations.</p>
</div>
<h3 id="Valeur_retournée">Valeur retournée</h3>
<p>Un objet {{domxref("Element")}} représentant le premier élément dans le document qui corresponde au jeu de <a href="/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS">sélecteurs CSS</a> spécifié, ou <code>null</code> s'il n'y a pas de correspondances.</p>
<p>Si vous avez besoin d'une liste de tous les éléments correspondant aux sélecteurs spécifiés, vous devez utiliser {{domxref("Document.querySelectorAll", "querySelectorAll()")}} à la place.</p>
<h3 id="Exception">Exception</h3>
<dl>
<dt><code>SYNTAX_ERR</code></dt>
<dd>La syntaxe des sélecteurs spécifiés est invalide.</dd>
</dl>
<h2 id="Notes">Notes d'utilisation</h2>
<p>Si le sélecteur correspond à un ID et que cet ID est utilisé de façon erronée plusieurs fois dans le document, le premier élément en correspondance est retourné.</p>
<p>Les <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-éléments</a> CSS ne retourneront jamais aucun élément, comme spécifié dans l'<a href="http://www.w3.org/TR/selectors-api/#grammar">API des sélecteurs</a> (en).</p>
<h3 id="Caractère_spécial_d'échappement">Caractère spécial d'échappement</h3>
<p>Pour faire correspondre un ID (<em>identifiant</em>) ou un sélecteur qui ne respecte pas la syntaxe CSS (en utilisant un point virgule ou un espace par exemple), vous devez échapper le caractère avec un antislash (\). Comme l'antislash est un caractère d'échappement en JavaScript, si vous entrez une chaîne de caractères littérale, vous devez donc l'échapper <em>deux fois</em> (une pour la chaîne de caractères JavaScript et une autre fois pour <code>querySelector</code>) :</p>
<pre class="brush: html"><div id="machin\bidule"></div>
<div id="machin:bidule"></div>
<script>
console.log('#machin\bidule') // "#machinidule" <code>(\b est le caractère de contrôle retour arrière)</code>
document.querySelector('#machin\bidule') // ne correspond à rien
console.log('#machin\\bidule') // "#machin\bidule"
console.log('#machin\\\\bidule') // "#machin\\bidule"
document.querySelector('#machin\\\\bidule') // correspond au premier div
document.querySelector('#machin:bidule') // ne correspond à rien
document.querySelector('#machin\\:bidule') // correspond au second div
</script>
</pre>
<h2 id="Exemple">Exemples</h2>
<h3 id="Trouver_le_premier_élément_correspondant_à_une_classe">Trouver le premier élément correspondant à une classe</h3>
<p>Dans cet exemple, le premier élément dans le document qui contient la classe "<code>maclasse</code>" est retourné :</p>
<pre class="brush: js">var el = document.querySelector(".maclasse");</pre>
<h3 id="Notes">Un sélecteur plus complexe</h3>
<p>Les <em>sélecteurs</em> peuvent également être réellement puissants comme le montre l'exemple suivant. Ici, le premier élément <code><input name="identifiant"/></code> dans un <code><div class="panneau-utilisateur principal"></code> dans le document est retourné :</p>
<pre class="brush: js">var el = document.querySelector("div.panneau-utilisateur.principal input[name='<code>identifiant</code>']");</pre>
<h2 id="Browser_Compatibility">Spécifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Spécification</th>
<th scope="col">Statut</th>
<th scope="col">Commentaire</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>Définition initiale</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
<div>{{Compat("api.Document.querySelector")}}</div>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a href="/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>{{domxref("document.querySelectorAll()")}} ;</li>
<li>{{domxref("element.querySelector()")}} ;</li>
<li>{{domxref("element.querySelectorAll()")}} ;</li>
<li><a href="/fr/docs/Archive/Add-ons/Code_snippets/QuerySelector">Extraits de code pour <code>querySelector</code></a></li>
</ul>
|
