Manipuler les classes HTML avec JavaScript

Identifier et vérifier le présence d'une classe

Dans cet exemple on vérifie et on teste la présence de la classe conteneur.

var conteneurElement = document.querySelector('.conteneur');
if (conteneurElement && conteneurElement.classList.contains('conteneur')) 
{
   alert("L'élément contient la classe conteneur");
} 
else 
{
   alert("L'élément ne contient pas la classe conteneur")
}

Tout d'abord document.querySelector('.conteneur') identifie dans le DOM l'élément avec la classe conteneur. Ensuite, classList.contains('conteneur') est utilisé pour tester si l'élément identifié a effectivement la classe conteneur.

Ajouter et supprimer une classe

Dans cet exemple on identifie tous les éléments avec la classe paragraphe contenus dans l'élément avec la classe conteneur.

Ensuite on ajoute ou on supprime une classe nommée vert.

var conteneurElement = document.querySelector('.conteneur');
if (conteneurElement) 
{
   var elementsParagraphe = conteneurElement.querySelectorAll('.paragraphe');
   elementsParagraphe.forEach(function(element) 
   {
      // Cette condition ajoute la classe vert
      if (element.classList.contains('vert') == false)
      {
         element.classList.add('vert');
      }
      // Cette condition supprime la classe vert
      if (element.classList.contains('vert') == true)
      {
         element.classList.remove('vert');
      }
   });
}

Le code vérifie d'abord si l'élément avec la classe conteneur existe. S'il existe, il récupère tous les éléments avec la classe paragraphe à l'intérieur de cet élément conteneur à l'aide de conteneurElement.querySelectorAll('.paragraphe').

Ensuite il parcourt ces éléments avec forEach et ajoute la classe vert à chacun d'eux si celle-ci n'est pas déja présente. Pour ajouter la classe on utilise la propriété classList.add

De la même manière on utilise la propriété classList.remove pour supprimer la classe.

Il existe également la propriété classList.toggle qui permet d'alterner une classe : si elle n'existe pas on l'ajoute, si elle existe on la supprime.

Utiliser les index pour cibler un élément précis

Dans l'exemple ci-avant tous les éléments avac la classe paragraphe étaient ciblés.

Dans l'exemple ci-dessous on cible des éléments précis avec la notion d'index.

Pour rappel les index commencent par zéro, ainsi le premier élément a un index égal à 0.

var conteneurElement = document.querySelector('.conteneur');
if (conteneurElement) 
{
   var elementsParagraphe = conteneurElement.querySelectorAll('.paragraphe');
   elementsParagraphe.forEach(function(element, index) 
   {
      if (index === 0) {
         // action à effectuer sur le 1er élément
      }
      if (index === 1) {
         // action à effectuer sur le 2ème élément
      }
      if (index === 2) {
         // action à effectuer sur le 3ème élément
      }
      if (index > 0) {
         // action à effectuer sur tous les éléments qui suivent le 1er élément
      }
   });
}

Compter le nombre de classes d'un élément

Pour compter le nombre de classes d'un élément en JavaScript, on peut utiliser la propriété classList pour accéder à la liste des classes, puis utiliser la propriété length pour compter le nombre total de classes.

Dans cet exemple on compte le nombre de classes du premier élément ayant la classe paragraphe, élément auxquel on aura préalablement ajouté la classe vert.

var conteneurElement = document.querySelector('.conteneur');
if (conteneurElement) 
{
   var elementsParagraphe = conteneurElement.querySelectorAll('.paragraphe');
   elementsParagraphe.forEach(function(element, index) 
   {
      if (index === 0) {
         var nombreClasses = element.classList.length;
         alert("l'élément contient "+nombreClasses+" classes");
      }
   });
}

Supprimer toutes les classes d'un élément

Pour supprimer toutes les classes d'un élément on peut définir la propriété className de l'élément sur une chaîne vide.

Dans cet exemple on supprime les classes du second élément ayant la classe paragraphe, élément auxquel on aura préalablement ajouté la classe vert et la classe italique.

var conteneurElement = document.querySelector('.conteneur');
if (conteneurElement) 
{
   var elementsParagraphe = conteneurElement.querySelectorAll('.paragraphe');
   elementsParagraphe.forEach(function(element, index) 
   {
      if (index === 1) {
          element.className = "";
      }
   });
}

Réinitialiser les classes par défaut

Au moment où j'écris ces lignes, il n'y a pas de méthode native intégrée à JavaScript qui permet de réinitialiser les classes originales comme elles étaient lors du chargement intitial du DOM.

Pour ce faire il faut jouer de subterfuges. Il faut donc créer sa propre fonction pour réinitialiser les classes d'un élément à ses classes par défaut.

La solution que je vous propose consiste à stocker les classes d'origine de l'élément dans un attribut dataset que l'on nomme data-original-classes, puis à utiliser cette information pour réinitialiser les classes.

function stockerClassesOriginales() 
{
   var elementsAvecClasses = document.querySelectorAll('[class]');
   elementsAvecClasses.forEach(function(element) 
   {
      if (!element.hasAttribute("data-original-classes")) 
      {
         element.setAttribute("data-original-classes", element.className);
      }
   });
}

Cette fonction utilise document.querySelectorAll('[class]') pour sélectionner tous les éléments ayant au moins une classe. Ensuite, elle parcourt ces éléments avec forEach, et si l'élément n'a pas déjà un attribut data-original-classes, elle stocke les classes d'origine dans cet attribut.

Ensuite il nous faut créer une seconde fonction JavaScript qui parcourt tous les éléments et remplace les classes actuelles par celles stockées dans l'attribut data-original-classes.

function restaurerClassesOriginales() 
{
   var elementsAvecClassesOriginales = document.querySelectorAll('[data-original-classes]');
   elementsAvecClassesOriginales.forEach(function(element) 
   {
      var classesOriginales = element.getAttribute("data-original-classes");
      element.className = classesOriginales;
   });
}

Cette fonction utilise document.querySelectorAll('[data-original-classes]') pour sélectionner tous les éléments ayant un attribut data-original-classes. Ensuite, elle parcourt ces éléments avec forEach et elle récupère les classes d'origine depuis l'attribut data-original-classes et elle remplace les classes actuelles par ces classes d'origine.

Dans l'exemple ci-après plusieurs classes sont présentes par défaut et sauvegardées dans l'attribut dataset. Un bouton supprimer supprime toutes les classes et un bouton réinitialiser les rétablis en utilisant la méthode explicitée ci-avant.