path: root/files/fr/web/api/element/queryselectorall/index.html

---
title: Element.querySelectorAll()
slug: Web/API/Element/querySelectorAll
tags:
  - API
  - DOM
  - Element
  - Méthode
  - Reference
translation_of: Web/API/Element/querySelectorAll
---
<div>{{APIRef("DOM")}}</div>

<p>La méthode  <code><strong>querySelectorAll()</strong></code> de {{domxref("Element")}} retourne une  {{domxref("NodeList")}} non-directe des éléments correspondants au groupe de selecteurs CSS spécifiés qui sont des descendants de l'élément sur lequel la méthode a été appelée.</p>

<div class="note">
<p><strong>Note :</strong> La définition de cet API a été déplacée vers l'interface {{domxref("ParentNode")}} .</p>
</div>

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

<pre class="syntaxbox"><em>elementList</em> = baseElement.querySelectorAll(<em>selectors</em>);
</pre>

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

<dl>
 <dt><code>selectors</code> </dt>
 <dd>une {{domxref("DOMString")}} contenant un ou plusieurs sélecteurs à comparer. Cette chaîne doit être valide pour les <a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS">sélecteurs CSS</a> ; si ce n'est pas le cas, une exception <code>SyntaxError</code> est levée. Voir <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> pour plus d'informations sur l'utilisation des sélecteurs pour identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés en les séparant par une virgule.</dd>
</dl>

<div class="note">
<p><strong>Note :</strong> Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'une barre oblique inverse. Puisque JavaScript utilise également l'échappement en retour arrière, un soin particulier doit être pris lors de l'écriture de littéraux de chaîne utilisant ces caractères.</p>
</div>

<h3 id="Example" name="Example">Valeur retournée</h3>

<p>Une {{domxref ("NodeList")}} contenant un objet {{domxref ("Element")}} pour chaque noeud descendant qui correspond à au moins un des sélecteurs spécifiés.</p>

<div class="note">
<p><strong>Note :</strong> Si le <code>selectors</code> spécifié inclus un <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-elements">pseudo-element CSS</a>, la liste renvoyée est toujours vide.</p>
</div>

<h3 id="Example" name="Example">Exception</h3>

<dl>
 <dt><code>SyntaxError</code></dt>
 <dd>La syntaxe de la chaîne du <code>selectors</code> spécifié n'est pas correcte.</dd>
</dl>

<h2 id="Example" name="Example">Exemples</h2>

<h3 id="Obtention_d'une_liste_de_correspondances">Obtention d'une liste de correspondances</h3>

<p>Pour obtenir une {{domxref("NodeList")}} de tous les éléments {{HTMLElement("p")}} contenus dans l'élément <code>"myBox"</code> :</p>

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> matches <span class="operator token">=</span> myBox<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>

<p>Cet exemple renvoie une liste de tous les éléments {{HTMLElement("div")}} dans <code>"myBox"</code>  avec une classe  "<code>note</code>" ou  "<code>alert</code>" :</p>

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> matches <span class="operator token">=</span> myBox<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"div.note, div.alert"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>

<p>Ici, nous obtenons une liste d'éléments <code>p</code> du document, dont le parent immédiat est un {{domxref("div")}}  qui a la classe <code>'highlighted'</code> et qui sont inclus dans un conteneur dont l'ID est <code>"test"</code> :</p>

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> container <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">"#test"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="keyword token">var</span> matches <span class="operator token">=</span> container<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"div.highlighted &gt; p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>

<p>Cet exemple utilise un <a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut">sélecteur d'attribut</a> pour renvoyer une liste d'éléments {{domxref("iframe")}} du document lesquels contiennent un attribut nommé <code>'data-src'</code>:</p>

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> matches <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"iframe[data-src]"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>

<p>Ici, un sélecteur d'attribut est utilisé pour renvoyer une liste des éléments de la liste contenus dans une liste dont l'ID est <code>"userlist"</code> et qui ont un attribut <code>"data-active"</code> dont la valeur est <code>"1"</code>:</p>

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> container <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">"#userlist"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="keyword token">var</span> matches <span class="operator token">=</span> container<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"li[data-active=1]"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>

<h3 id="Accès_aux_correspondances">Accès aux correspondances</h3>

<p>Une fois que la {{domxref("NodeList")}} des éléments correspondants est retournée, vous pouvez l'examiner pour n'importe quel tableau (<em>array</em>). Si le tableau est vide (sa propriété <code>length</code> est 0), alors aucune correspondance n'a été trouvée.</p>

<p>Sinon, vous pouvez simplement utiliser la notation de tableau standard pour accéder au contenu de la liste. Vous pouvez utiliser n'importe quelle instruction de boucle commune, telle que :</p>

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> highlightedItems <span class="operator token">=</span> userList<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">".highlighted"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>

highlightedItems<span class="punctuation token">.</span><span class="function token">forEach</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>userItem<span class="punctuation token">)</span> <span class="punctuation token">{</span>
  <span class="function token">deleteUser</span><span class="punctuation token">(</span>userItem<span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>

<h2 id="Notes" name="Notes">Notes d'utilisation</h2>

<p><code>queryselectorAll</code> se comporte différemment des bibliothèques DOM JavaScript les plus courantes, ce qui peut entraîner des résultats inattendus.</p>

<h3 id="HTML">HTML</h3>

<p>Considérons ce code HTML, avec ses trois blocs {{HTMLElement ("div")}} imbriqués.</p>

<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>outer<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>select<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>inner<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> select <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">'.select'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="keyword token">var</span> inner <span class="operator token">=</span> select<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">'.outer .inner'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
inner<span class="punctuation token">.</span>length<span class="punctuation token">;</span> <span class="comment token">// 1, pas 0!</span></code></pre>

<p>Dans cet exemple, en sélectionnant <code>".outer .inner"</code> dans le contexte <code>&lt;div&gt; </code>avec la classe <code>"select"</code>, l'élément avec la classe <code>".inner"</code> est toujours trouvé, même si <code>.outer</code> n'est pas un descendant de l'élément sur lequel la recherche est effectuée <code>(".select")</code>. Par défaut, <code>querySelectorAll()</code> vérifie uniquement que le dernier élément du sélecteur se trouve dans la portée de la recherche.</p>

<p><span lang="fr"><span>La pseudo-classe {{cssxref (": scope")}} restaure le comportement attendu, ne faisant correspondre les sélecteurs que sur les descendants de l'élément de base :</span></span></p>

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> select <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">'.select'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="keyword token">var</span> inner <span class="operator token">=</span> select<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">':scope .outer .inner'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
inner<span class="punctuation token">.</span>length<span class="punctuation token">;</span> <span class="comment token">// 0</span></code></pre>

<h2 id="Spécifications">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("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
   <td>{{Spec2("DOM WHATWG")}}</td>
   <td>norme actuelle</td>
  </tr>
  <tr>
   <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
   <td>{{Spec2("Selectors API Level 2")}}</td>
   <td>Pas de changement</td>
  </tr>
  <tr>
   <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
   <td>{{Spec2("DOM4")}}</td>
   <td>Définition initiale</td>
  </tr>
  <tr>
   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
   <td>{{Spec2("Selectors API Level 1")}}</td>
   <td>Définition originale</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonctionnalité</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1</td>
   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
   <td>8</td>
   <td>10</td>
   <td>3.2 (525.3)</td>
  </tr>
  <tr>
   <td><code>:scope</code> pseudo-class</td>
   <td>{{ CompatVersionUnknown }}</td>
   <td>32</td>
   <td>{{CompatNo}}</td>
   <td>15<sup>[1]</sup></td>
   <td>7.0</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>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.9.1")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>:scope</code> pseudo-class</td>
   <td>{{ CompatUnknown }}</td>
   <td>32</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>7.0</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Pris en charge dans Opera 15+ en activant les balises "<strong>Enable &lt;style scoped&gt;</strong>" ou "<strong>Enable experimental Web Platform features</strong>" dans <code>chrome://flags</code>.</p>

<h2 id="Voir_aussi">Voir aussi</h2>
</div>

<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 de MDN</li>
 <li>{{domxref("element.querySelector()")}}</li>
 <li>{{domxref("Document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}</li>
 <li>{{domxref("DocumentFragment.querySelector()")}} et {{domxref("DocumentFragment.querySelectorAll()")}}</li>
 <li>{{domxref("document.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}}</li>
 <li><a href="https://developer.mozilla.org/fr/Add-ons/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector">Extraits de code pour <code>querySelector</code></a></li>
</ul>