diff options
Diffstat (limited to 'files/fr/web/api/document/getelementsbyclassname/index.md')
| -rw-r--r-- | files/fr/web/api/document/getelementsbyclassname/index.md | 108 |
1 files changed, 51 insertions, 57 deletions
diff --git a/files/fr/web/api/document/getelementsbyclassname/index.md b/files/fr/web/api/document/getelementsbyclassname/index.md index 43ff0fb18a..02659c2a50 100644 --- a/files/fr/web/api/document/getelementsbyclassname/index.md +++ b/files/fr/web/api/document/getelementsbyclassname/index.md @@ -8,85 +8,79 @@ tags: - Reference translation_of: Web/API/Document/getElementsByClassName --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<p>Renvoie un objet de type tableau de tous les éléments enfants qui ont tous les noms de classe donnés. Lorsqu'il est appelé sur l'objet document, le document complet est recherché, y compris le nœud racine. Vous pouvez également appeler {{domxref ("Element.getElementsByClassName", "getElementsByClassName ()")}} sur n'importe quel élément; il retournera uniquement les éléments qui sont les descendants de l'élément racine spécifié avec les noms de classes donnés.</p> +Renvoie un objet de type tableau de tous les éléments enfants qui ont tous les noms de classe donnés. Lorsqu'il est appelé sur l'objet document, le document complet est recherché, y compris le nœud racine. Vous pouvez également appeler {{domxref ("Element.getElementsByClassName", "getElementsByClassName ()")}} sur n'importe quel élément; il retournera uniquement les éléments qui sont les descendants de l'élément racine spécifié avec les noms de classes donnés. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>var elements</var> = document.getElementsByClassName(<em>names</em>); // or: -<var>var elements</var> = rootElement.getElementsByClassName(<em>names</em>);</pre> + var elements = document.getElementsByClassName(names); // or: + var elements = rootElement.getElementsByClassName(names); -<ul> - <li><var>elements</var> est une {{domxref ("HTMLCollection")}} des éléments trouvés.</li> - <li><var>names</var> est une chaîne représentant le nom de la classe des éléments à trouver.</li> - <li>getElementsByClassName peut être appelé sur n'importe quel élément, pas seulement sur le document. L'élément sur lequel il est appelé sera utilisé comme racine de la recherche.</li> -</ul> +- _elements_ est une {{domxref ("HTMLCollection")}} des éléments trouvés. +- _names_ est une chaîne représentant le nom de la classe des éléments à trouver. +- getElementsByClassName peut être appelé sur n'importe quel élément, pas seulement sur le document. L'élément sur lequel il est appelé sera utilisé comme racine de la recherche. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Trouve tous les éléments ayant la classe « test » :</p> +Trouve tous les éléments ayant la classe « test » : -<pre class="eval"> document.getElementsByClassName('test') -</pre> + document.getElementsByClassName('test') -<p>Trouve tous les éléments ayant les classes « rouge » et « test » :</p> +Trouve tous les éléments ayant les classes « rouge » et « test » : -<pre class="eval"> document.getElementsByClassName('rouge test') -</pre> + document.getElementsByClassName('rouge test') -<p>Trouve tous les éléments qui ont la classe « test » à l'intérieur d'un élément ayant l'ID « main » :</p> +Trouve tous les éléments qui ont la classe « test » à l'intérieur d'un élément ayant l'ID « main » : -<pre class="eval"> document.getElementById('main').getElementsByClassName('test') -</pre> + document.getElementById('main').getElementsByClassName('test') -<p>Nous pouvons également utiliser les méthodes de Array.prototype sur toute {{domxref ("HTMLCollection")}} en passant HTMLCollection comme valeur de la méthode. Ici, nous allons trouver tous les éléments div qui ont une classe de 'test':</p> +Nous pouvons également utiliser les méthodes de Array.prototype sur toute {{domxref ("HTMLCollection")}} en passant HTMLCollection comme valeur de la méthode. Ici, nous allons trouver tous les éléments div qui ont une classe de 'test': -<pre class="brush: js">var testElements = document.getElementsByClassName('test'); +```js +var testElements = document.getElementsByClassName('test'); var testDivs = Array.prototype.filter.call(testElements, function(testElement){ return testElement.nodeName === 'DIV'; -});</pre> - -<p>XXX writeme == Notes == Une méthode semblable existe pour <code>Element</code></p> - -<h2 id="Sp.C3.A9cification">Obtenir la classe des éléments test</h2> - -<p>C'est la méthode d'opération la plus couramment utilisée.</p> - -<pre class="brush: html"><!doctype html> -<html> -<head> - <meta charset="UTF-8"> - <title>Document</title> -</head> -<body> - <div id="parent-id"> - <p>hello word1</p> - <p class="test">hello word2</p> - <p >hello word3</p> - <p>hello word4</p> - </div> - <script> +}); +``` + +XXX writeme == Notes == Une méthode semblable existe pour \<code>Element\</code> + +## Obtenir la classe des éléments test + +C'est la méthode d'opération la plus couramment utilisée. + +```html +<!doctype html> +<html> +<head> + <meta charset="UTF-8"> + <title>Document</title> +</head> +<body> + <div id="parent-id"> + <p>hello word1</p> + <p class="test">hello word2</p> + <p >hello word3</p> + <p>hello word4</p> + </div> + <script> var parentDOM = document.getElementById("parent-id"); var test=parentDOM.getElementsByClassName("test");//test is not target element console.log(test);//HTMLCollection[1] var testTarget=parentDOM.getElementsByClassName("test")[0];//here , this element is target - console.log(testTarget);//<p class="test">hello word2</p> - </script> -</body> -</html></pre> + console.log(testTarget);//<p class="test">hello word2</p> + </script> +</body> +</html> +``` -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs +{{Compat("api.Document.getElementsByClassName")}} -<p>{{Compat("api.Document.getElementsByClassName")}}</p> +## Spécification - - -<h2 id="Specification">Spécification</h2> - -<ul> - <li><a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname">W3C: getElementsByClassName</a></li> -</ul> +- [W3C: getElementsByClassName](https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname) |