Méthode getElementsByClassName() de l'élément HTML DOM

Définition et utilisation

getElementsByClassName() La méthode renvoie un ensemble d'éléments enfants ayant le nom de classe donné, sous forme d'objet NodeList.

Veuillez également consulter :

Propriété classList

Propriété className

Méthode querySelector()

Méthode querySelectorAll()

Méthode getElementsByTagName()

Objet Style HTML DOM

Tutoriel :

Syntaxe CSS

Sélecteurs CSS

Manuel des sélecteurs CSS

NodeList

NodeList C'est une collection de nœuds semblables à un tableau (liste).

Vous pouvez accéder aux nœuds de la liste par index (index). L'index commence à 0.

Propriété lengthRetourne le nombre de nœuds dans la liste.

Exemple

Exemple 1

Modifier le texte du premier élément de la liste en utilisant class="child":

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

Essayer vous-même

Exemple 2

Nombre d'éléments class="child" dans "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
let number = nodes.length;

Essayer vous-même

Exemple 3

Modifier la taille du deuxième élément de class="child":

const element = document.getElementById("myDIV");
element.getElementsByClassName("child")[1].style.fontSize = 24px";

Essayer vous-même

Exemple 4

Utiliser les classes "child" et "color" dans le deuxième élément de class="example" pour modifier la taille du premier élément :

const elements = document.getElementsByClassName("example")[1];
elements.getElementsByClassName("child color")[0].style.fontSize = "24px";

Essayer vous-même

Exemple 5

Modifier la couleur de tous les éléments de class="child" dans "myDIV" :

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.color = "red";
}

Essayer vous-même

Syntaxe

element.getElementsByClassName(classname)

Paramètre

Paramètre Description
classname

Obligatoire. Nom de la classe du sous-élément.

Séparez plusieurs noms par des espaces (par exemple "child color").

Valeur de retour

Type Description
NodeList

Sous-éléments des éléments contenant le nom de classe donné.

Les éléments sont triés dans l'ordre de leur apparition dans le code source.

Support du navigateur

element.getElementsByClassName() C'est une fonctionnalité de DOM Level 1 (1998).

Tous les navigateurs le supportent complètement :

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