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 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.

Syntaxe

var elements = document.getElementsByClassName(names); // or:
var elements = rootElement.getElementsByClassName(names);
  • elements est une 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.

Exemples

Trouve tous les éléments ayant la classe « test » :

 document.getElementsByClassName('test')

Trouve tous les éléments ayant les classes « rouge » et « test » :

 document.getElementsByClassName('rouge test')

Trouve tous les éléments qui ont la classe « test » à l'intérieur d'un élément ayant l'ID « main » :

 document.getElementById('main').getElementsByClassName('test')

Nous pouvons également utiliser les méthodes de Array.prototype sur toute 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':

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

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.

<!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>

Compatibilité des navigateurs

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !

 

Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Oui) (Oui) 3.0 9.0 (Oui) (Oui)
  
Fonctionnalité Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? (Oui) ? ? ? ?

Spécification

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : loella16, fscholz, teoli, khalid32, Mgjbot, BenoitL
Dernière mise à jour par : loella16,