Document HTML DOM getElementsByClassName()
Exemple
Récupère tous les éléments avec class="example":
const collection = document.getElementsByClassName("example");
Obtenez tous les éléments avec les classes "example" et "color":
const collection = document.getElementsByClassName("example color");
Plus d'exemples ci-dessous.
Définition et utilisation
La getElementsByClassName()méthode renvoie une collection d'éléments avec un ou des noms de classe spécifiés.
La getElementsByClassName()méthode renvoie une HTMLCollection .
La getElementsByClassName()propriété est en lecture seule.
Collection HTML
Une HTMLCollection est une collection de nœuds HTML.
Les nœuds d'une collection sont accessibles par des numéros d'index. L'indice commence à 0.
La propriété length renvoie le nombre d'éléments dans la collection.
Voir également:
La méthode Document getElementById()
La méthode Document getElementsByTagName()
La méthode document querySelector()
Syntaxe
document.getElementsByClassName(classname)
Paramètres
| Parameter | Description |
| classname | Required. The class name of the elements. Search for multiple class names separated by spaces like "test demo". |
Valeur de retour
| Taper | La description |
| Objet. | Un objet HTMLCollection . Une collection d'éléments avec le nom de classe spécifié. Les éléments sont triés tels qu'ils apparaissent dans le document. |
Plus d'exemples
Nombre d'éléments avec class="example":
let numb = document.getElementsByClassName("example").length;
Changez 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";
}
Pages connexes
Tutoriel CSS : Syntaxe CSS
Référence CSS : CSS .class Selector
Référence HTML DOM : élément .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
Prise en charge du navigateur
document.getElementsByClassName() est une fonctionnalité DOM niveau 1 (1998).
Il est entièrement pris en charge dans tous les navigateurs :
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |