Méthode getElementsByClassName() du Document HTML DOM

Définition et utilisation

getElementsByClassName() La méthode retourne une collection d'éléments avec le nom de classe spécifié.

getElementsByClassName() La méthode retourne HTMLCollection.

getElementsByClassName() Les attributs sont en lecture seule.

HTMLCollection

HTMLCollection C'est une collection de类似数组的HTML元素（列表）.

Les éléments de la collection peuvent être accédés par index (commençant à 0).

length L'attribut retourne le nombre d'éléments dans la collection.

Veuillez également consulter :

Méthode getElementById()

Méthode getElementsByTagName()

Méthode querySelector()

Méthode querySelectorAll()

Objet HTMLCollection

Exemple

Exemple 1

Obtenir tous les éléments avec la classe="example":

const collection = document.getElementsByClassName("example");

Essayez-le vous-même

Exemple 2

Obtenir tous les éléments qui ont les classes "example" et "color":

const collection = document.getElementsByClassName("example color");

Essayez-le vous-même

Exemple 3

Nombre d'éléments avec class="example" :

let numb = document.getElementsByClassName("example").length;

Essayez-le vous-même

Exemple 4

Modifier la couleur de fond de tous les éléments avec class="example" :

const collection = document.getElementsByClassName("example");
for (let i = 0; i < collection.length; i++) {
  collection[i].style.backgroundColor = "red";
}

Essayez-le vous-même

Syntaxe

document.getElementsByClassName("classname)

Paramètres

Paramètres Description
classname

Obligatoire. Nom de classe de l'élément.

Retourne des noms de classes séparés par des espaces, par exemple "test demo".

Valeur de retour

Type Description
Objet

Objet HTMLCollection.

Collection d'éléments possédant un nom de classe spécifique.

Trie les éléments selon l'ordre de leur apparition dans le document.

Support du navigateur

document.getElementsByClassName() C'est une caractéristique de DOM Level 1 (1998).

Tous les navigateurs le supportent :

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support 9-11 Support Support Support Support

Pages associées

Tutoriel CSS :Grammaire CSS

Manuel de référence CSS :Sélecteur .class CSS

Manuel de référence HTML DOM :element.getElementsByClassName()

Manuel de référence HTML DOM :Attribut className

Manuel de référence HTML DOM :Attribut classList

Manuel de référence HTML DOM :Objet Style