Element.getElementsByClassName()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

La méthode Element.getElementsByClassName() retourne une 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.

À l'instar de la méthode 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.

Syntaxe

js
var elements = element.getElementsByClassName(names);
  • elements est une HTMLCollection de référence vers les élements trouvés.
  • names est une chaine représentant la liste des noms de classes à trouver; les noms de classes sont séparés par un espace.
  • element est n'importe quel Element du document.

Exemples

Obtient tous les élements ayant une classe test:

js
element.getElementsByClassName("test");

Obtient tous les élements ayant à la fois la classe red et la classe test:

js
element.getElementsByClassName("red test");

Obtient tous les élements qui ont une classe test, à l'intérieur d'un élement qui a pour id main:

js
document.getElementById("main").getElementsByClassName("test");

On peut aussi utiliser les méthodes de Array.prototype sur chaque HTMLCollection en passant la HTMLCollection comme valeur this de la méthode. Ci-dessous on trouvera tous les <div> avec une classe test:

js
var testElements = document.getElementsByClassName("test");
var testDivs = Array.prototype.filter.call(
  testElements,
  function (testElement) {
    return testElement.nodeName === "div";
  },
);

Spécifications

Specification
DOM
# ref-for-dom-element-getelementsbyclassname

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
getElementsByClassName

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
See implementation notes.
Has more compatibility info.