Comment puis-je vérifier efficacement si un élément JavaScript DOM contient une classe spécifique ?

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

En JavaScript, vous pouvez rencontrer des scénarios dans lesquels vous devez déterminer si un élément DOM contient une classe spécifique. Bien que votre approche actuelle utilisant element.className et une instruction switch puisse fonctionner, elle présente des limites lorsqu'un élément a plusieurs classes.

Utilisation d'element.classList.contains()

Pour une meilleure compatibilité entre navigateurs, vous pouvez utiliser la méthode element.classList.contains() :

element.classList.contains(className);

Cette méthode renvoie un booléen indiquant si l'élément a la classe spécifiée. Il est pris en charge dans tous les principaux navigateurs.

Approche alternative avec indexOf

Si vous utilisez des navigateurs existants qui ne prennent pas en charge element.classList, vous pouvez modifier votre approche indexOf existante comme suit :

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

Cela garantit que la vérification ne renvoie vrai que si la classe que vous recherchez n'est pas contenue dans une autre nom de la classe.

Exemple d'implémentation

Application des techniques mises à jour à votre exemple :

var test = document.getElementById("test"),
    classes = ['class1', 'class2', 'class3', 'class4'];

test.innerHTML = "";

for(var i = 0, j = classes.length; i < j; i++) {
    if(hasClass(test, classes[i])) {
        test.innerHTML = "I have " + classes[i];
        break;
    }
}

Cette approche gère le cas où l'élément de test a plusieurs classes, garantissant que la classe correcte est détectée même si son ordre ou des classes supplémentaires sont présentes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!