如何最好地检查元素是否具有类？

Question

问题

如果元素有多个类，则无法通过常规属性值检查匹配，因此我正在寻找最佳方法来检查对象是否存在于元素的className属性中的特定类。

示例

// element's classname is 'hello world helloworld'
var element = document.getElementById('element');

// this obviously fails
if(element.className == 'hello'){ ... }

// this is not good if the className is just 'helloworld' because it will match
if(element.className.indexOf('hello') != -1){ ... }  

那么最好的方法是什么？

请只使用纯JavaScript。

- Adam Halasz

---

你可以使用一些正则表达式来匹配完整的类名。关于正则表达式，你可以参考这个链接：https://dev59.com/7nE95IYBdhLWcg3wm_Mu。 - nandu

可能是重复的问题：如何测试一个元素是否包含某个类？ -- 在提出新问题之前，请先使用搜索功能。 - Felix Kling

Answer 1

function hasClass( elem, klass ) {
     return (" " + elem.className + " " ).indexOf( " "+klass+" " ) > -1;
}

- Esailija

---

很肯定，jQuery的版本会先规范化.className值中的空格分隔符。如果使用制表符或其他空格字符来分隔类，则可能会出现问题。 - the system

Answer 2

在现代浏览器中，你可以使用 classList：

if (element.classList.contains("hello")) {
   // do something
}  

在不支持 classList 但暴露 DOM 原型的浏览器中，您可以使用链接中显示的 shim。否则，您可以使用相同的 shim 代码来创建一个通用函数而不需要操作原型。

- ZER0

Answer 3

这个2018年使用了ES6

const hasClass = (el, className) => el.classList.contains(className);

如何使用

hasClass(document.querySelector('div.active'), 'active'); // true

- Gor

Answer 4

你要求使用纯JavaScript，这是jQuery的实现方式：

    hasClass: function( selector ) {
        var className = " " + selector + " ",
            i = 0,
            l = this.length;
        for ( ; i < l; i++ ) {
            if ( this[i].nodeType === 1 && (" " + this[i].className + " ").replace(rclass, " ").indexOf( className ) > -1 ) {
                return true;
            }
        }
        return false;
    },

rclass 是一个正则表达式，包括 [\n\t\r]，以确保替代类名分隔方法不会成为问题。this 是 jQuery 对象的引用，从某种意义上讲，它使代码比所需更复杂，但是即使不知道其细节，也应该很容易理解。

- Steve

---

你是不是把这个从jQuery里复制过来了？this指的是什么？ rclass定义在哪里了？ - Salman A

我在我的评论中非常清楚地提到了它来自jQuery。你提出了一个很好的关于rclass的观点，我没有注意到，我会更新答案。 - Steve

Answer 5

这应该适用于您：

var a = [];
function getElementsByClassName(classname, node)  {
    if(!node) node = document.getElementsByTagName("body")[0];

    var re = new RegExp('\\b' + classname + '\\b');
    var els = node.getElementsByTagName("*");
    for(var i=0, j=els.length; i<j; i++)
        if(re.test(els[i].className)) a.push(els[i]);
        return a;
}

getElementsByClassName('wrapper');
for (var i=0; i< a.length; i++) {
    console.log(a[i].className);
}

这段代码将遍历DOM并搜索在主函数中定义为参数的类。然后，它将使用正则表达式模式测试每个找到的类元素。如果找到了，它将被推送到一个数组中，并输出结果。

- Endre Simo

Answer 6

首先，通过使用 " " 字符拆分 className，然后检查您想要查找的类的索引。

function hasClass(element, clazz) {
    return element.className.split(" ").indexOf(clazz) > -1;
}

- Rodolphe BELOUIN

---

尽管(indexOf不支持数组)，但无法在IE8及以下版本中直接使用。 - Felix Kling