Element.getElementsByClassName()

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

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:

element.getElementsByClassName('test');

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

element.getElementsByClassName('red test');

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

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:

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

Spécifications

Spécification Statut Commentaire
DOM
La définition de 'Element.getElementsByClassName()' dans cette spécification.
Standard évolutif Définition initiale

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
getElementsByClassNameChrome Support complet 1Edge Support complet 16
Support complet 16
Aucun support 12 — 16
Notes
Notes This function is implemented in the HTMLElement API, meaning non-HTML elements (like SVG elements) cannot use this function.
Firefox Support complet 3
Notes
Support complet 3
Notes
Notes Prior to Firefox 19, this method was returning a NodeList; it was then changed to reflect the change in the spec.
IE Support complet 9
Notes
Support complet 9
Notes
Notes This function is implemented in the HTMLElement API, meaning non-HTML elements (like SVG elements) cannot use this function.
Opera Support complet 9.5Safari Support complet 6WebView Android Support complet 1Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 10.1Safari iOS Support complet 6Samsung Internet Android Support complet 1.0

Légende

Support complet  
Support complet
Voir les notes d'implémentation.
Voir les notes d'implémentation.