diff options
Diffstat (limited to 'files/fr/web/api/document/queryselectorall')
| -rw-r--r-- | files/fr/web/api/document/queryselectorall/index.html | 130 |
1 files changed, 31 insertions, 99 deletions
diff --git a/files/fr/web/api/document/queryselectorall/index.html b/files/fr/web/api/document/queryselectorall/index.html index b9c36f07e7..6347a584c8 100644 --- a/files/fr/web/api/document/queryselectorall/index.html +++ b/files/fr/web/api/document/queryselectorall/index.html @@ -19,14 +19,14 @@ translation_of: Web/API/Document/querySelectorAll <h2 id="Syntax" name="Syntax">Syntaxe</h2> -<pre class="brush: js">elements = document.querySelectorAll(selecteurs); +<pre class="brush: js"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>); </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> + <dd>une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) qui contient un ou plusieurs <a href="/fr/docs/Web/CSS/CSS_Selectors">sélecteurs CSS</a> ; s'il n'y en a pas, une exception <code>SyntaxError</code> est lancée. Voir <a href="/fr/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">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"> @@ -38,7 +38,7 @@ translation_of: Web/API/Document/querySelectorAll <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> +<p><strong>Note : </strong> si les <code><em>selectors</em></code> spécifiés contiennent un <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-element CSS</a>, la liste retournée sera toujours vide.</p> </div> <h3 id="Exceptions">Exceptions</h3> @@ -52,26 +52,26 @@ translation_of: Web/API/Document/querySelectorAll <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> +<pre class="brush: js">const matches = document.querySelectorAll("p");</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 class="brush: js">const 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> +<pre class="brush: js">const container = document.querySelector("#test"); +const matches = container.querySelectorAll("div.highlighted > p");</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> +<pre class="brush: js">const matches = document.querySelectorAll("iframe[data-src]");</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> +<pre class="brush: js">const container = document.querySelector("#userlist"); +const matches = container.querySelectorAll("li[data-active='1']");</pre> <h3 id="Accès_aux_correspondances">Accès aux correspondances</h3> @@ -79,11 +79,11 @@ translation_of: Web/API/Document/querySelectorAll <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> +<pre class="brush: js">const highlightedItems = userList.querySelectorAll(".highlighted"); -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> +highlightedItems.forEach(function(userItem) { + deleteUser(userItem); +});</pre> <h2 id="Notes" name="Notes">Notes d'utilisation</h2> @@ -93,26 +93,26 @@ highlightedItems<span class="punctuation token">.</span><span class="function to <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> +<pre class="brush: html"><div class="outer"> + <div class="select"> + <div class="inner"> + </div> + </div> +</div></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> +<pre class="brush: js">const select = document.querySelector('.select'); +const inner = select.querySelectorAll('.outer .inner'); +inner.length; // 1, not 0!</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> +<pre class="brush: js">const select = document.querySelector('.select'); +const inner = select.querySelectorAll(':scope .outer .inner'); +inner.length; // 0</pre> <h2 id="Spécification">Spécification</h2> @@ -148,85 +148,17 @@ inner<span class="punctuation token">.</span>length<span class="punctuation toke <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> +<p>{{Compat("api.Document.querySelectorAll")}}</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><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/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> + <li><a href="/fr/docs/Code_snippets/QuerySelector">Extraits de code pour <code>querySelector</code></a></li> </ul> |