element.classList.contains（）在JavaScript中到底是如何工作的？

我需要使用

element.classList.contains（'some-class'）

来检查一个元素是否至少包含三个类中的一个，所以我写了：

if (element.classList.contains('class1', 'class2', 'class3')) {
  // do stuff here
}

结果是-如果元素有'class1'，它将返回true，不管它有'class2'或/和'class3'，并且

//在这里做事

执行。但是，如果它有'class2'和/或'class3'，则返回false和'class3'

//在这里做事

不执行

我通过以下方式解决了这一问题：

if (element.classList.contains('class1') || element.classList.contains('class2') || element.classList.contains('class3')) {
  // do stuff here 
}

---

它告诉您作为第一个参数传递的类名是否是元素所属的类之一

---

与所有JavaScript函数一样，您可以传递任意多的附加参数。

包含的

函数对它们没有任何作用。

此函数只接受一个参数。contains方法用于检查类列表是否包含单个元素。您在底部发布的代码块是一个很好的解决方法。但不幸的是，您试图在顶部执行的操作超出了类列表API的范围。

尝试

document.querySelectorAll

HTML:

---

演示：

它对我来说是这样的：

让elem=document.querySelector（“span”）；
if（elem.classList.contains（'beta'））{
elem.textContent=“类列表包含“beta”；
}否则{
elem.textContent=“类列表不包含“beta”；
}

---

这是正确的。您可以在这里找到更优雅的“变通方法”：仍然是这样吗？contains-检查元素的类列表是否包含特定的类。因此，是的，您需要检查元素是否包含A、B或C

<div class="class1"></div>
<!--<div class="class2"></div> -->
<!-- <div class="class3"></div> -->

<div id="result"></div>

var el = document.querySelectorAll('.class1, .class2, .class3');
var result = document.getElementById('result');

result.innerHTML = el.length;

var c = element.classList;
var any = c.contains( 'class1' ) || c.contains( 'class2' ) || c.contains( 'class3' );
var all = c.contains( 'class1' ) && c.contains( 'class2' ) && c.contains( 'class3' );