files/fr/web/api/element/queryselector/index.html


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

---
title: Element.querySelector()
slug: Web/API/Element/querySelector
tags:
  - API
  - CSS
  - CSS Selectors
  - DOM
  - Element
  - Elements
  - Finding Elements
  - Locating Elements
  - Method
  - Reference
  - Searching Elements
  - Selecting Elements
  - Selectors
  - querySelector
translation_of: Web/API/Element/querySelector
---
<div>{{APIRef("DOM")}}</div>

<p>La méthode <strong><code>querySelector()</code></strong> de l'interface <a href="/fr/docs/Web/API/Element"><code>Element</code></a> renvoie le premier élément descendant de l'élément sur lequel elle est invoquée qui correspond au groupe de sélecteurs spécifié.</p>

<h2 id="syntax">Syntaxe</h2>

<pre class="syntaxbox"><var>element</var> = baseElement.querySelector(<var>selector</var>s);</pre>

<h3 id="parameters">Paramètres</h3>

<dl>
  <dt><code>selectors</code></dt>
  <dd>est un groupe de <a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">sélecteurs</a> à faire correspondre aux éléments descendants du <a href="/fr/docs/Web/API/Element"><code>Element</code></a> <code>baseElement</code> ; cette syntaxe CSS doit être valide ou une exception SyntaxError se produit. Le premier élément trouvé correspondant à ce groupe de sélecteurs est renvoyé.</dd>
</dl>

<h3 id="return_value">Valeur retournée</h3>

<p>Le premier élément descendant de <code>baseElement</code> qui correspond au groupe de <code>selectors</code> « sélecteurs » spécifié. 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 ; 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. Les éléments résultants sont ensuite examinés pour voir s'ils sont des descendants de <code>baseElement</code>. La première correspondance de ces éléments restants est renvoyée par la méthode <code>querySelector()</code>.</p>

<p>Si aucune correspondance n'est trouvée, la valeur retournée est <code>null</code>.</p>

<h3 id="exceptions">Exceptions</h3>

<dl>
  <dt>SyntaxError</dt>
  <dd>Les <code>selectors</code> spécifiés sont invalides.</dd>
</dl>

<h2 id="example">Exemple</h2>

<p>Dans ce premier exemple, est retourné le premier élément <a href="/fr/docs/Web/HTML/Element/style"><code>&lt;style&gt;</code></a> 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="the_entire_hierarchy_counts">La hiérarchie entière compte</h3>

<p>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 <code>baseElement</code> spécifié sont toujours pris en compte lors de la recherche des correspondances.</p>

<h4 id="html">HTML</h4>

<pre class="brush: html">&lt;div&gt;
  &lt;h5&gt;Original content&lt;/h5&gt;
  &lt;p&gt;
    inside paragraph
    &lt;span&gt;inside span&lt;/span&gt;
    inside paragraph
  &lt;/p&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;h5&gt;Output&lt;/h5&gt;
  &lt;div id="output"&gt;&lt;/div&gt;
&lt;/div&gt;</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="result">Résultat</h4>

<p>Le résultat ressemble à ceci :</p>

<div>{{EmbedLiveSample('the_entire_hierarchy_counts', '', 200)}}</div>

<h3 id="more_examples">Plus d'exemples</h3>

<p>Voir <a href="/fr/docs/Web/API/Document/querySelector"><code>Document.querySelector()</code></a> pour des exemples supplémentaires du format approprié pour les sélecteurs.</p>

<h2 id="specifications">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="browser_compatibility">Compatibilité des navigateurs</h2>

<p>{{Compat("api.Element.querySelector")}}</p>

<h2 id="see_also">Voir aussi</h2>

<ul>
  <li><a href="/fr/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Localisation des éléments DOM avec les sélecteurs</a></li>
  <li><a href="/fr/docs/Web/CSS/Attribute_selectors">Sélecteurs d'attribut</a> dans le guide CSS</li>
  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Sélecteurs d'attribut</a> dans la zone d'apprentissage MDN</li>
  <li><a href="/fr/docs/Web/API/Element/querySelectorAll"><code>element.querySelectorAll()</code></a></li>
  <li><a href="/fr/docs/Web/API/Document/querySelector"><code>document.querySelector()</code></a> et <a href="/fr/docs/Web/API/Document/querySelectorAll"><code>Document.querySelectorAll()</code></a></li>
  <li><a href="/fr/docs/Web/API/DocumentFragment/querySelector"><code>DocumentFragment.querySelector()</code></a> et <a href="/fr/docs/Web/API/DocumentFragment/querySelectorAll"><code>DocumentFragment.querySelectorAll()</code></a></li>
  <li><a href="/fr/docs/Web/API/ParentNode/querySelector"><code>ParentNode.querySelector()</code></a> et <a href="/fr/docs/Web/API/ParentNode/querySelectorAll"><code>ParentNode.querySelectorAll()</code></a></li>
  <li><a href="/en-US/docs/Archive/Add-ons/Code_snippets/QuerySelector">Exemples de code pour querySelector</a> <small>Archive en anglais</small></li>
  <li>Autres méthodes qui prennent des sélecteurs : <a href="/fr/docs/Web/API/Element/closest"><code>element.closest()</code></a> et <a href="/fr/docs/Web/API/Element/matches"><code>element.matches()</code></a>.</li>
</ul>