aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/api/element/getelementsbyclassname
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
commit33058f2b292b3a581333bdfb21b8f671898c5060 (patch)
tree51c3e392513ec574331b2d3f85c394445ea803c6 /files/fr/web/api/element/getelementsbyclassname
parent8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff)
downloadtranslated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip
initial commit
Diffstat (limited to 'files/fr/web/api/element/getelementsbyclassname')
-rw-r--r--files/fr/web/api/element/getelementsbyclassname/index.html71
1 files changed, 71 insertions, 0 deletions
diff --git a/files/fr/web/api/element/getelementsbyclassname/index.html b/files/fr/web/api/element/getelementsbyclassname/index.html
new file mode 100644
index 0000000000..6db517f757
--- /dev/null
+++ b/files/fr/web/api/element/getelementsbyclassname/index.html
@@ -0,0 +1,71 @@
+---
+title: Element.getElementsByClassName()
+slug: Web/API/Element/getElementsByClassName
+tags:
+ - API
+ - Classes
+ - Element
+ - Method
+ - Reference
+ - getElementByClassName
+translation_of: Web/API/Element/getElementsByClassName
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <strong><code>Element.getElementsByClassName()</code></strong> retourne une {{domxref("HTMLCollection")}} contenant une référence sur tous les éléments ayant les noms de classes passés en paramètre. Quand la méthode est appelée sur l'objet document, la recherche s'effectue dans le document complet, noeud racine compris.</p>
+
+<p>À l'instar de la méthode {{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} qui agit sur le document entier ; elle va retourner les descendants de l'élément spécifié comme document root qui auront les noms de classes passés en paramètre.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>var <em>elements</em></var> = <em>element</em>.getElementsByClassName(<em>names</em>);</pre>
+
+<ul>
+ <li><em><var>elements</var></em> est une {{ domxref("HTMLCollection") }} de référence vers les élements trouvés.</li>
+ <li><em><var>names</var></em> est une chaine représentant la liste des noms de classes à trouver; les noms de classes sont séparés par un espace.</li>
+ <li><em>element</em> est n'importe quel {{domxref("Element")}} du document.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Obtient tous les élements ayant une classe <code>test</code>:</p>
+
+<pre class="brush: js">element.getElementsByClassName('test');</pre>
+
+<p>Obtient tous les élements ayant à la fois la classe <code>red</code> et la classe <code>test</code>:</p>
+
+<pre class="brush: js">element.getElementsByClassName('red test');</pre>
+
+<p>Obtient tous les élements qui ont une classe <code>test</code>, à l'intérieur d'un élement qui a pour id <code>main</code>:</p>
+
+<pre class="brush: js">document.getElementById('main').getElementsByClassName('test');</pre>
+
+<p>On peut aussi utiliser les méthodes de {{jsxref("Array.prototype")}} sur chaque {{ domxref("HTMLCollection") }} en passant la <code><var>HTMLCollection</var></code> comme valeur <var>this</var> de la méthode. Ci-dessous on trouvera tous les {{HTMLElement("div")}} avec une classe <code>test</code>:</p>
+
+<pre class="brush: js">var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement){
+ return testElement.nodeName === 'div';
+});</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-element-getelementsbyclassname', 'Element.getElementsByClassName()')}}</td>
+ <td>{{Spec2('DOM WHATWG')}}</td>
+ <td>Définition initiale</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer à ces données, veuillez consulter le site <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Element.getElementsByClassName")}}</p>