为什么 .includes() 不能与 .classList 一起使用？答案

【问题标题】：Why doesn't .includes() work with .classList?为什么 .includes() 不能与 .classList 一起使用？
【发布时间】：2016-09-30 16:47:33
【问题描述】：

element.classList 返回一个类数组，我的 understanding .includes() 与数组一起使用，所以我不明白为什么这不起作用，我知道我可以将 .contains() 与 classList 一起使用，但我很好奇为什么 .includes() 不起作用。

两者都是数组，如果我输入这个例子，它就不会工作

var li=document.createElement('li');
li.classList.add('main-nav');
li.classList.includes('main-nav');

但这会

var ary=['a','b','c'];
ary.includes('a');

【问题讨论】：

【解决方案1】：

includes 不起作用的原因是classList 不是一个数组，而是一个类数组 对象。在这种情况下，它是DOM Token List。

您可以使用以下方法将类数组对象转换为数组：

var liClasses = [].slice.apply(li.classList);

或

var liClasses = [...li.classList]; // es2015 syntax

li.classList.contains('main-nav')

包含（字符串）

检查元素的类属性中是否存在指定的类值。

【讨论】：

@cashwrap 这实际上是不可能的。编辑此答案的时间是最初发布另一个答案的确切时间。 --- 他们的：“2016 年 6 月 1 日 10:59 回答”，我的“2016 年 6 月 1 日 10:59 编辑”。
你说得对，有很多相似之处。另一个答案更全面，但这个答案绝不是副本。此外，后来的编辑是在 此答案后两年多。 -- 无论如何，感谢您的道歉。

【解决方案2】：

Element.classList 是一个DOMTokenList 对象，尽管它在控制台中打印一个类似数组的对象。但如果你尝试使用 Firefox，它会返回 DOMTokenList["main-nav"]

而且，includes 是Array 的方法，而不是DOMTokenList。

这就是为什么在您的情况下预计会遇到li.classList.includes is not a function。

您可以使用ES2015 spread operator 将其转换为数组。

[...li.classList].includes('main-nav')

或者，您也可以使用DOMTokenList.contains 方法。

li.classList.contains('main-nav')

为什么声明为includes 而不是has 或contains？（感谢@akinuri）

网络上有 DOMStringList 和 DOMTokenList 这样的类它们类似于数组，并且具有名为 contains 的方法与我们的includes 语义相同。不幸的是，与那些不兼容网络。

【讨论】：

空格分隔符字符串？不是DOM Token List？
@evolutionxbox 是的，它是.. 我只是碰巧添加了更多关于它的解释.. 不过，感谢您指出:)..
但是它们（包括和包含）不是大致意思相同吗？那么在 DOMTokenList 上使用 contains 并在 Array 上使用 include 的理由是什么？这有点令人困惑。我有时会忘记哪个是哪个，然后发现自己在查找。
@akinuri 感谢您也让我对此感到好奇。我找到了相关参考并更新了我的答案。

【解决方案3】：

element.classList 返回一个DOMTokenList。这是来自 Firefox 控制台的示例。

而.includes() 是Array.prototype 中定义的方法，仅适用于数组对象。

DOMTokenList 具有执行该功能的 .contains() 方法。

【讨论】：