Document : méthode getElementsByClassName()
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La méthode getElementsByClassName de l'interface Document retourne un objet semblable à un tableau contenant tous les éléments enfants qui possèdent tous les noms de classe donnés.
Lorsqu'elle est appelée sur l'objet document, le document complet est parcouru, y compris le nœud racine. Vous pouvez également appeler getElementsByClassName() sur n'importe quel élément ; cela retournera uniquement les éléments qui sont des descendants de l'élément racine défini avec les noms de classe donnés.
Attention :
Il s'agit d'une collection (HTMLCollection) dynamique. Les modifications dans le DOM se reflèteront dans le tableau au fur et à mesure qu'elles se produisent. Si un élément sélectionné par ce tableau ne correspond plus au sélecteur, il sera automatiquement supprimé. Tenez-en compte lors de l'itération.
Syntaxe
getElementsByClassName(names)
Paramètres
names-
Une chaîne de caractères représentant le ou les noms de classe à rechercher ; plusieurs noms de classe sont séparés par des espaces.
Valeur de retour
Une collection (HTMLCollection) dynamique des éléments trouvés.
Exemples
Récupère tous les éléments ayant la classe « test » :
document.getElementsByClassName("test");
Récupère tous les éléments ayant les classes « rouge » et « test » :
document.getElementsByClassName("rouge test");
Récupère tous les éléments qui ont la classe « test » à l'intérieur d'un élément ayant l'ID « main » :
document.getElementById("main").getElementsByClassName("test");
Récupère le premier élément ayant la classe « test », ou undefined s'il n'y a aucun élément correspondant :
document.getElementsByClassName("test")[0];
Nous pouvons également utiliser les méthodes de Array.prototype sur n'importe quelle collection HTMLCollection en passant HTMLCollection comme valeur de this de la méthode. Ici, nous allons trouver tous les éléments div qui ont une classe « test » :
const testElements = document.getElementsByClassName("test");
const testDivs = Array.prototype.filter.call(
testElements,
(testElement) => testElement.nodeName === "DIV",
);
Obtenir le premier élément dont la classe est « test »
C'est la méthode d'opération la plus couramment utilisée.
<div id="parent-id">
<p>bonjour le monde1</p>
<p class="test">bonjour le monde2</p>
<p>bonjour le monde3</p>
<p>bonjour le monde4</p>
</div>
const parentDOM = document.getElementById("parent-id");
const test = parentDOM.getElementsByClassName("test"); // une liste d'éléments correspondants, *pas* l'élément lui-même
console.log(test); // HTMLCollection[1]
const testTarget = parentDOM.getElementsByClassName("test")[0]; // le premier élément, comme nous le voulions
console.log(testTarget); // <p class="test">bonjour le monde2</p>
Exemple de classes multiples
document.getElementsByClassName fonctionne de manière très similaire à document.querySelector et document.querySelectorAll. Seuls les éléments possédant TOUS les noms de classe définis sont sélectionnés.
HTML
<span class="orange fruit">Orange Fruit</span>
<span class="orange jus">Orange Jus</span>
<span class="pomme jus">Pomme Jus</span>
<span class="toto truc">Un truc aléatoire</span>
<textarea id="zoneDeResultat"></textarea>
JavaScript
// getElementsByClassName ne sélectionne que les éléments qui ont toutes les classes données
const tousLesJusOrangeParClass = document.getElementsByClassName("orange jus");
let resultat = "document.getElementsByClassName('orange jus')";
for (const el of tousLesJusOrangeParClass) {
resultat += `\n ${el.textContent}`;
}
// querySelector ne sélectionne que les correspondances complètes
const toutesRequetesJusOrange = document.querySelectorAll(".orange.jus");
resultat += "\n\ndocument.querySelectorAll('.orange.jus')";
for (const el of toutesRequetesJusOrange) {
resultat += `\n ${el.textContent}`;
}
document.getElementById("zoneDeResultat").value = resultat;
Résultat
Spécifications
| Specification |
|---|
| DOM # ref-for-dom-document-getelementsbyclassname① |