element.classList.contains() 在 JavaScript 中究竟是如何工作的？答案

【问题标题】：How exactly does element.classList.contains() work in JavaScript?element.classList.contains() 在 JavaScript 中究竟是如何工作的？
【发布时间】：2014-12-19 12:24:50
【问题描述】：

我需要使用element.classList.contains('some-class') 来检查一个元素是否至少包含三个类中的一个，所以我写道：

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

结果是 - 如果元素有 'class1'，它返回 true，不管它是否有 'class2' 或/和 'class3'，并且 // do stuff here 执行。但是，如果它有 'class2' 和/或 'class3'，它返回 false 和 // do stuff here 不执行。

我解决了这个问题：

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

【问题讨论】：

contains - 检查元素的类列表是否包含特定类。 dom.spec.whatwg.org/#interface-domtokenlist 所以是的，你需要检查一个元素是否包含 A 或包含 B 或包含 C

标签： javascript

【解决方案1】：

这个函数只需要一个参数。 contains 方法用于检查您的 classList 是否包含单个元素。您在底部发布的代码块是一个很好的解决方法。但不幸的是，您在顶部尝试做的事情超出了 classList API 的范围。

【讨论】：

这是正确的。您可以在这里找到更优雅的“解决方法”：stackoverflow.com/questions/6391448/…
还是这样吗？

【解决方案2】：

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

与所有 JavaScript 函数一样，您可以传递任意数量的附加参数。 contains 函数对它们没有任何作用。

【讨论】：

【解决方案3】：

试试document.querySelectorAll

HTML：

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

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

Javascript

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

result.innerHTML = el.length;

演示：https://codepen.io/fatihhayri/pen/weqzWE

【讨论】：

【解决方案4】：

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' );

【讨论】：

【解决方案5】：

这样对我有用：

let elem = document.querySelector("span");

if (elem.classList.contains('beta')) {
elem.textContent = "The classList contains 'beta'";
} else {
elem.textContent = "The classList does not contain 'beta'";
}

&lt;span class="alpha beta gamma"&gt;&lt;/span&gt;

【讨论】：