javascript - element.classList.contains() 和 element.matches() 有什么区别

Question

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

选项 1

element.classList.contains('someClass');

选项 2

此选项还允许检查多个类别，而选项 1 不允许(需要对每个类别单独检查)

element.matches('.someClass');

问题

什么时候应该使用哪个选项？除了提到的之外，它们之间还有什么其他区别吗？哪个比较便宜？

Answer 1

element.matches允许进行更灵活的测试。

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

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

将返回 true如果element是一个 anchor 元素，它有一个 someClass类，还有一个 foo类。

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

将返回 true如果element有一个 someClass类，有一个 data-num属性为 3，正在悬停。

费用无关紧要 - 无论如何，性能成本几乎为零。