JavaScript getElementsByClassName (Français)

Résumé: dans ce didacticiel, vous apprendrez à utiliser la méthode getElementsByClassName() pour sélectionner des éléments par nom de classe.

Introduction à la méthode getElementsByClassName ()

Chaque élément HTML a un attribut de classe facultatif comme celui-ci:

Code language: HTML, XML (xml)

La valeur de lattribut class est une liste des classes de lélément, séparées par des espaces. Les classes sont sensibles à la casse.

Les classes vous permettent dutiliser le CSS pour faire correspondre des éléments. Par exemple:

Code language: CSS (css)

En JavaScript, vous utilisez la méthode getElementsByClassName() pour sélectionner des éléments en fonction de leurs classes.

La méthode getElementsByClassName() est disponible sur lobjet document et sur tout élément HTML.

Le La méthode getElementsByClassName() accepte un seul argument qui est une chaîne contenant un ou plusieurs noms de classe:

Code language: JavaScript (javascript)

Dans ce syntaxe, le paramètre classNames est une chaîne qui représente un nom de classe à faire correspondre. Par exemple:

Code language: JavaScript (javascript)

Si vous faites correspondre des éléments de plusieurs classes, vous devez utiliser des espaces pour les séparer comme ceci:

Code language: JavaScript (javascript)

Notez que vous ne pouvez pas utiliser de sélecteurs de classe, par exemple .btn ou .btn-primary pour getElementsByClassName().

La méthode getElementsByClassName() renvoie un HTMLCollection déléments en direct, qui est un objet de type tableau.

Si vous appelez la méthode getElementsByClassName() sur lobjet document, la méthode recherche pour les éléments avec les noms de classe spécifiés dans tout le document.

Cependant, lorsque vous appelez la méthode getElementsByClassName() sur un élément spécifique, elle ne renvoie que les éléments correspondants dans le sous-arborescence de cet élément.

Exemples JavaScript getElementsByClassName ()

Prenons quelques exemples dutilisation de la méthode getElementsByClassName().

Supposons que vous ayez le code HTML suivant:

1) Appel de JavaScript getElementsByClassName () sur un exemple délément

Lexemple suivant illustre comment utiliser la méthode getElementsByClassName() pour sélectionner le <li> éléments qui sont les descendants de lélément <ul>:

Résultat:

Code language: JavaScript (javascript)

Comment ça marche:

• Tout dabord, sélectionnez lélément <ul> avec le nom de classe menu en utilisant la méthode getElementById().
• Ensuite, sélectionnez les éléments <li>, qui sont les descendants des <ul>, en utilisant la méthode getElementsByClassName().
• Enfin, créez un tableau du contenu textuel de <li> éléments en empruntant la méthode map() de lobjet Array.

2) Appel de JavaScript getElementsByClassName () sur lexemple de document

Pour rechercher lélément avec le class heading-secondary, vous utilisez le code suivant:

Sortie:

Code language: JavaScript (javascript)

Cet exemple appelle la méthode getElementsByClassName() sur lobjet document, par conséquent, il recherche les éléments avec la classe heading-secondary dans tout le document.

Dans ce didacticiel, vous avez appris à utiliser la méthode getElementsByClassName() pour sélectionner des éléments par un ou plusieurs noms de classe.