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="/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="/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">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="/fr/docs/Web/CSS/Pseudo-elements">pseudo-element CSS</a>, la liste renvoyée est toujours vide.</p>
</div>

<h3 id="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">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">var matches = myBox.querySelectorAll("p");</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">var matches = myBox.querySelectorAll("div.note, div.alert");</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">var container = document.querySelector("#test");
var matches = container.querySelectorAll("div.highlighted &gt; p");</pre>

<p>Cet exemple utilise un <a href="/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">var matches = document.querySelectorAll("iframe[data-src]");</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">var container = document.querySelector("#userlist");
var matches = container.querySelectorAll("li[data-active=1]");</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">var highlightedItems = userList.querySelectorAll(".highlighted");

highlightedItems.forEach(function(userItem) {
  deleteUser(userItem);
});</pre>

<h2 id="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">&lt;div class="outer"&gt;
  &lt;div class="select"&gt;
    &lt;div class="inner"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>

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

<pre class="brush: js">var select = document.querySelector('.select');
var inner = select.querySelectorAll('.outer .inner');
inner.length; // 1, pas 0!</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>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 :</p>

<pre class="brush: js">var select = document.querySelector('.select');
var inner = select.querySelectorAll(':scope .outer .inner');
inner.length; // 0</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>

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

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

<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><a href="/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut">Sélecteurs d'attribut</a> dans le guide CSS</li>
 <li><a href="/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="/fr/Add-ons/Code_snippets/QuerySelector">Extraits de code pour <code>querySelector</code></a></li>
</ul>