Vérifier si un élément contient une classe en JavaScript

1. Utilisez la méthode intégrée element.classList.contains() pour vérifier si un élément contient une classe en JavaScript
2. Utilisez un sélecteur de requête et la méthode Element.matches() pour vérifier si un élément contient une classe en JavaScript
3. Utilisez indexOf() pour vérifier si un élément contient une classe en JavaScript

L’utilisation de classes en HTML vous permet de regrouper des éléments et d’effectuer les mêmes opérations sur chacun d’eux en termes de style ou de fonctionnalité. En tant que tel, vous pouvez facilement modifier le comportement de tous les éléments qui partagent une classe en une seule ligne de code.

Il existe des situations où vous pouvez souhaiter qu’un élément fasse partie de plusieurs classes. HTML vous permet de le faire, mais vous devez suivre certaines règles pour éviter un comportement inattendu.

De plus, la sélection d’éléments par classe en JavaScript devient un peu plus délicate s’ils sont étiquetés avec plusieurs classes. Ne t’inquiète pas; nous pouvons vérifier si un élément contient une classe spécifique.

Utilisez la méthode intégrée element.classList.contains() pour vérifier si un élément contient une classe en JavaScript

Sans surprise, ce cas d’utilisation est suffisamment courant pour avoir sa méthode native en JavaScript, qui devrait être votre première option si aucune autre exigence particulière n’est impliquée.

L’essentiel de cette méthode est de récupérer un élément, de parcourir toutes les classes auxquelles il appartient, puis de vérifier si la classe que vous lui donnez en argument fait bien partie de la liste. Voici comment cela fonctionne en pratique :

<div id="mydiv" class="myclass1 myclass2">My Element</div>

let element = document.getElementById('mydiv');

console.log(element.classList.contains('myclass1'));

Production :

true

Le code JavaScript ci-dessus est compatible avec tous les navigateurs modernes, bien que certains problèmes puissent survenir dans les très anciennes versions d’Internet Explorer.

Utilisez un sélecteur de requête et la méthode Element.matches() pour vérifier si un élément contient une classe en JavaScript

Les sélecteurs de requête sont des outils JavaScript très puissants, d’autant plus qu’ils peuvent généralement faire tout ce que fait jQuery, sauf que vous n’avez pas besoin d’une bibliothèque tierce.

Dans ce cas, le sélecteur de requête vous permet de sélectionner l’élément sur lequel vous souhaitez effectuer la vérification, tandis que la méthode Element.matches() vous permet de vérifier à nouveau si la classe est présente ou non.

<div id="mydiv" class="myclass1 myclass2">My Element</div>

let element = document.querySelector('#mydiv');

console.log(element.matches('.myclass1'));

Production :

true

Comme vous pouvez le voir, le code requis pour ces deux méthodes est plus ou moins le même en termes de complexité et de longueur. Cependant, le sélecteur de requête nécessite un navigateur plus moderne que la méthode classList.contains(), alors gardez cela à l’esprit également.

Utilisez indexOf() pour vérifier si un élément contient une classe en JavaScript

Bien que les navigateurs modernes prennent en charge les deux méthodes décrites ci-dessus, vous n’aurez peut-être pas ce luxe. Ainsi, si votre code doit être compatible avec de très anciennes versions de navigateur, vous pouvez également obtenir le même résultat en utilisant la méthode indexOf(). Voici comment cela fonctionne :

<div id="mydiv" class="myclass1 myclass2">My Element</div>

let element = document.getElementById('mydiv');

function containsClass(element, className) {
  return (' ' + element.className + ' ').indexOf(' ' + className + ' ') > -1;
}

console.log(containsClass(element, 'myclass1'));

Production :

true

Naturellement, cette méthode est plus compliquée, même si les résultats sont les mêmes. Essentiellement, nous créons notre méthode appelée containsClass, qui parcourt la liste des classes de notre élément.

Si la classe que nous recherchons est trouvée, alors elle aura un index de 0 ou plus, et la méthode retournera true.