Javascript element.classList.contains（）和element.matches（）之间的区别是什么

在JavaScript中，您可以使用以下选项检查元素是否具有特定类：

选项1

元素.classList.contains（'someClass'）

选项2

此选项还允许在选项1不允许的情况下检查多个类（需要对每个类进行单独检查）

元素。匹配（'.someClass'）

问题

---

除上述内容外，当它们之间存在任何其他差异时，应使用哪个选项？哪一个比较便宜？

元素。匹配允许更灵活的测试

如果您只需要检查元素是否有一个特定的类，请随意使用
contains
。但是如果您想根据元素可以匹配的CSS选择器进行额外的检查，
.matches
允许使用更简洁的方法来实现该目标。例如：

element.matches('a.someClass.foo')

如果
element
是锚元素，则返回
true
，锚元素有
someClass
类，也有
foo
类

element.matches('.someClass[data-num="3"]:hover')

如果
元素
具有
someClass
类，且
data num
属性为3，并且处于悬停状态，则将返回
true

费用不重要——不管怎样，性能成本几乎是零

matches（）方法检查所提供的选择器字符串是否会选择元素，换句话说，检查元素“是否”是选择器。资料来源：

Matches不仅测试类，还测试整个选择器（元素的任何属性）。例如，您可以将其用于数据属性：

element.matches('[data-anything="value"]')

classlist.contains（）
仅适用于类


哪一个比较便宜？

我个人认为这无关紧要，但理论上，
contains（）
应该更便宜，因为它只针对一个特定属性。
一个属性比另一个更通用。“哪一个比较便宜？”尽管这很可能无关紧要。