diff options
Diffstat (limited to 'files/fr/web/api/document/queryselectorall')
| -rw-r--r-- | files/fr/web/api/document/queryselectorall/index.html | 232 |
1 files changed, 232 insertions, 0 deletions
diff --git a/files/fr/web/api/document/queryselectorall/index.html b/files/fr/web/api/document/queryselectorall/index.html new file mode 100644 index 0000000000..b9c36f07e7 --- /dev/null +++ b/files/fr/web/api/document/queryselectorall/index.html @@ -0,0 +1,232 @@ +--- +title: Document.querySelectorAll() +slug: Web/API/Document/querySelectorAll +tags: + - API + - DOM + - Document + - Méthodes + - Sélecteurs +translation_of: Web/API/Document/querySelectorAll +--- +<div>{{APIRef("DOM")}}</div> + +<p>La méthode <code><strong>querySelectorAll()</strong></code> de {{domxref("Element")}} renvoie une {{domxref("NodeList")}} statique représentant une liste des éléments du document qui correspondent au groupe de sélecteurs spécifiés.</p> + +<div class="note"> +<p><strong>Note :</strong> Cette méthode est implémentée à partir de {{domxref("ParentNode")}}, méthode du mixin {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} .</p> +</div> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="brush: js">elements = document.querySelectorAll(selecteurs); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>selecteurs</code></dt> + <dd>une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) qui contient un ou plusieurs <a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS">sélecteurs CSS</a> ; s'il n'y en a pas, une exception <code>SyntaxError</code> est lancé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 en vue d'identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés, séparés 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. Voir {{anch ("Echapper des caractères spéciaux")}} pour plus d'informations.</p> +</div> + +<h3 id="Valeur_renvoyée">Valeur renvoyée</h3> + +<p>Une {{domxref("NodeList")}} statique contenant un objet {{domxref("Element")}} pour chaque élément qui correspond à au-moins un des sélecteurs spécifiés ou une {{domxref("NodeList")}} vide si aucune correspondance n'est trouvée .</p> + +<div class="note"> +<p><strong>Note : </strong> si les <code><em>selectors</em></code> spécifiés contiennent un <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-elements">pseudo-element CSS</a>, la liste retournée sera toujours vide.</p> +</div> + +<h3 id="Exceptions">Exceptions</h3> + +<dl> + <dt><code>SyntaxError</code></dt> + <dd>la syntaxe des chaînes <code>selectors</code> spécifiés n'est pas valide.</dd> +</dl> + +<h2 id="Example" name="Example">Exemples</h2> + +<p>Pour obtenir une {{domxref("NodeList")}} (<em>liste de noeuds</em>) de tous les éléments {{HTMLElement("p")}} dans le document :</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">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Cet exemple renvoie la liste de tous les éléments <code>div</code> du <code>document</code> dont l'attribut de classe a pour valeur "<code>note</code>" ou "<code>alert</code>" :</p> + +<pre class="brush: js">var matches = document.querySelectorAll("div.note, div.alert"); +</pre> + +<p>Ici, nous obtenons une liste des éléments <code><p></code> dont l'élément parent immédiat est un {{domxref("div")}} avec la classe <code>"highlighted"</code> et qui sont situés dans un conteneur dont l'identifiant 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 > 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")}} dans le document qui contient 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 d'éléments de liste contenus dans une liste dont l'identifiant est <code>"userlist"</code> lequel a 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 renvoyée, vous pouvez l'examiner comme un tableau (<em>array</em>). Si le tableau est vide (c'est quand 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érez ce 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"><</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">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</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">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</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">></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>div</span><span class="punctuation token">></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, lors de la sélection de <code>".outer .inner"</code> dans le contexte, le <code><div></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 de base sur lequel la recherche <code>(".select")</code> est effectuée. 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 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écification">Spécification</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"> +<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 marques "<strong>Enable <style scoped></strong>" ou "<strong>Enable experimental Web Platform features</strong>" dans <code>chrome://flags</code>.</p> +</div> + +<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.querySelectorAll")}} et {{domxref("Element.querySelectorAll()")}}</li> + <li>{{domxref("document.querySelector")}}</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">Extraits de code pour <code>querySelector</code></a></li> +</ul> |