DOM HTML getElementsByClassName()Méthode

元素对象参考手册 Objet Element

Exemple

Dans la liste avec class="example", modifiez le texte du premier élément (index 0) avec class="child" :

var list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";

Avant de modifier le texte :

Café
Thé

Après avoir modifié le texte :

Lait
Thé

Essayez-le vous-même »

Définition et utilisation

La méthode getElementsByClassName() renvoie une collection de tous les éléments ayant le nom de classe spécifié dans le document, sous la forme d'un objet NodeList.

Un objet NodeList représente une liste ordonnée de nœuds. Nous pouvons accéder aux nœuds de l'objet NodeList via les numéros d'index des nœuds dans la liste (les numéros d'index commencent à 0).

Astuce :Vous pouvez utiliser length, propriété de l'objet NodeList, pour déterminer le nombre d'éléments ayant le nom de classe spécifié, et parcourir les éléments pour obtenir celui dont vous avez besoin.

Prise en charge des navigateurs

Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la méthode.

Méthode
getElementsByClassName()	4.0	9.0	3.0	3.1	9.5

Syntaxe

element.getElementsByClassName(classname)

Valeurs des paramètres

Paramètre	Type	Description
classname	String	Obligatoire. Le nom de classe de l'élément que vous devez obtenir. Plusieurs noms de classe sont séparés par des espaces, par ex. : "test demo".

Détails techniques

Version DOM :	Objet Element Core Level 1
Valeur de retour :	Un objet NodeList, représentant une collection d'éléments ayant le nom de classe spécifié. Les éléments sont ordonnés tels qu'ils apparaissent dans le code.

Plus d’exemples

Exemple

Changez la couleur d'arrière-plan du deuxième élément avec class="child" dans l'élément <div> :

var x = document.getElementById("myDIV");
x.getElementsByClassName("child")[1].style.backgroundColor = "red";

Essayez-le vous-même »

Exemple

Comptez combien d'éléments avec class="child" se trouvent dans l'élément <div> (en utilisant la propriété length de NodeList) :

var x = document.getElementById("myDIV").getElementsByClassName("child").length;

xLe résultat de sortie est:

Essayez-le vous-même »

Exemple

Changez la couleur d'arrière-plan du premier élément avec les noms de classe "child" et "color" dans l'élément class="example" :

var x = document.getElementsByClassName("example")[1];
x.getElementsByClassName("child color")[0].style.backgroundColor = "red";

Essayez-le vous-même »

Exemple

Changez la couleur d'arrière-plan de tous les éléments avec class="child" dans l'élément <div> :

var x = document.getElementById("myDIV");
var y = x.getElementsByClassName("child");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "red";
}

Essayez-le vous-même »