Manipuler les classes HTML avec JavaScript

Catégorie < javascript >

1FORMATIK.com
Espace ~public
© 1998 - 2024

Sommaire

  • Préambule, manipulation du DOM et des classes CSS
  • Identifier et vérifier le présence d'une classe
  • Ajouter et supprimer une classe
  • Utiliser les index pour cibler un élément précis
  • Compter le nombre de classes d'un élément
  • Supprimer toutes les classes d'un élément
  • Réinitialiser les classes par défaut

Information

Rédigé par Antoine
Publié le 2024-01-18
Modifié le 2024-01-18
375 affichages
3 likes
0 non-like

Préambule, manipulation du DOM et des classes CSS

La manipulation du DOM (Document Object Model) et des classes avec JavaScript consiste à utiliser des scripts pour interagir dynamiquement avec la structure HTML d'une page web. Le DOM représente la hiérarchie des éléments HTML sous forme d'objets, et JavaScript offre des méthodes pour identifier, accéder, modifier, ajouter ou supprimer ces éléments.

Les classes CSS sont quant à elles utilisées pour appliquer des styles à des éléments HTML. Elles permettent de définir des ensembles de règles de style que vous pouvez réutiliser sur plusieurs éléments de votre page web.

L'utilisation et la manipulation des classes permet de modifier le comportement des éléments de manière flexible.

En manipulant les classes on peut créer des pages web interactives et réactives, où les changements sont effectués dynamiquement en réponse aux actions de l'utilisateur ou à d'autres événements. Cela permet de construire des interfaces utilisateur plus riches et dynamiques.

Vous trouverez ci-après plusieurs exemples qui illustrent les différentes méthodes que l'on peut utiliser pour manipuler les classes CSS.

Tous les exemples à venir sont basés sur la même architecture HTML, la voici :

<div class="conteneur">
   <p class="paragraphe">Texte du paragraphe numéro 1</p>
   <p class="paragraphe">Texte du paragraphe numéro 2</p>
   <p class="paragraphe">Texte du paragraphe numéro 3</p>
</div>

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.

Voici le code ci-avant en action pour vérifier et tester la présence de la classe conteneur :

Texte du paragraphe numéro 1

Texte du paragraphe numéro 2

Texte du paragraphe numéro 3

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.

Voici le code ci-avant en action pour ajouter ou supprimer une classe avec JavaScript :

Texte du paragraphe numéro 1

Texte du paragraphe numéro 2

Texte du paragraphe numéro 3

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");
      }
   });
}

Voici le code ci-avant en action pour compter le nombre de classe d'un élément :

Texte du paragraphe numéro 1

Texte du paragraphe numéro 2

Texte du paragraphe numéro 3

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 = "";
      }
   });
}

Voici le code ci-avant en action pour supprimer toutes les classes d'un élément :

Texte du paragraphe numéro 1

Texte du paragraphe numéro 2

Texte du paragraphe numéro 3

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.

Voici le code ci-avant en action pour réinitialiser les classes d'un élément :

Texte du paragraphe numéro 1

Texte du paragraphe numéro 2

Texte du paragraphe numéro 3

Ce contenu vous a-t-il été utile ?

Autres publications dans la catégorie <javascript>

Faire un don

Soutenez-moi par un don.

Par avance, merci.