Méthode HTML DOM getElementsByClassName()
❮ L'objet élémentExemple
Changez le texte du premier élément de la liste avec class="child" (index 0) dans une liste avec class="example":
var list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La méthode getElementsByClassName() renvoie une collection d'éléments enfants d'un élément avec le nom de classe spécifié, sous la forme d'un objet NodeList.
L'objet NodeList représente une collection de nœuds. Les nœuds sont accessibles par des numéros d'index. L'indice commence à 0.
Conseil : Vous pouvez utiliser la propriété length de l'objet NodeList pour déterminer le nombre de nœuds enfants avec le nom de classe spécifié, puis vous pouvez parcourir tous les nœuds et extraire les informations souhaitées.
Prise en charge du navigateur
Les nombres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge la méthode.
| Method | |||||
|---|---|---|---|---|---|
| getElementsByClassName() | 4.0 | 9.0 | 3.0 | 3.1 | 9.5 |
Syntaxe
element.getElementsByClassName(classname)
Valeurs des paramètres
| Parameter | Type | Description |
|---|---|---|
| classname | String | Required. The class name of the child elements you want to get. To search for multiple class names, separate them with spaces, like "child color". |
Détails techniques
| Version DOM : | Objet élément de niveau 1 de base |
|---|---|
| Valeur de retour : | Un objet NodeList, représentant une collection d'éléments enfants des éléments avec le nom de classe spécifié. Les éléments de la collection renvoyée sont triés tels qu'ils apparaissent dans le code source. |
Plus d'exemples
Exemple
Modifiez la couleur d'arrière-plan du deuxième élément avec class="child" à l'intérieur d'un élément <div> :
var x =
document.getElementById("myDIV");
x.getElementsByClassName("child")[1].style.backgroundColor = "red";
Exemple
Découvrez combien d'éléments avec class="child" il y a à l'intérieur d'un élément <div> (en utilisant la propriété length de l'objet NodeList) :
var x =
document.getElementById("myDIV").getElementsByClassName("child").length;
Exemple
Modifiez la couleur d'arrière-plan du premier élément avec les classes "child" et "color" à l'intérieur d'un élément avec class="example":
var x = document.getElementsByClassName("example")[1];
x.getElementsByClassName("child color")[0].style.backgroundColor = "red";
Exemple
Modifiez la couleur d'arrière-plan de tous les éléments avec class="child" à l'intérieur d'un é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";
}
Pages connexes
Tutoriel CSS : Syntaxe CSS
Référence CSS : CSS .class Selector
Référence HTML DOM : document.getElementsByClassName()
Référence HTML DOM : propriété className
Référence HTML DOM : propriété classList
Référence HTML DOM : objet de style HTML DOM
❮ L'objet élément