在 JavaScript 中检查元素是否包含类

Alex Dulcianu 2023年1月30日 2022年5月1日
  1. 使用内置 element.classList.contains() 方法检查元素是否包含 JavaScript 中的类
  2. 使用查询选择器和 Element.matches() 方法检查元素是否包含 JavaScript 中的类
  3. 使用 indexOf() 检查元素是否包含 JavaScript 中的类
在 JavaScript 中检查元素是否包含类

在 HTML 中使用类允许你对元素进行分组,并在样式或功能方面对所有元素执行相同的操作。因此,你可以在一行代码中轻松更改共享一个类的所有元素的行为。

在某些情况下,你可能希望一个元素成为多个类的一部分。HTML 允许你执行此操作,但你必须遵循某些规则以避免意外行为。

此外,如果在 JavaScript 中按类选择元素,则如果它们被标记为多个类,则会变得更加棘手。不用担心;我们可以检查一个元素是否包含一个特定的类。

使用内置 element.classList.contains() 方法检查元素是否包含 JavaScript 中的类

不出所料,这个用例很常见,可以在 JavaScript 中使用其本机方法,如果不涉及其他特殊要求,这应该是你的首选。

这个方法的要点是检索一个元素,遍历它所属的所有类,然后检查你作为参数提供的类是否确实是列表的一部分。以下是它在实践中的工作方式:

<div id="mydiv" class="myclass1 myclass2">My Element</div>
let element = document.getElementById("mydiv");

console.log(element.classList.contains("myclass1"));

输出:

true

上面的 JavaScript 代码与所有现代浏览器兼容,尽管在非常旧的 Internet Explorer 版本中可能会出现一些问题。

使用查询选择器和 Element.matches() 方法检查元素是否包含 JavaScript 中的类

查询选择器是非常强大的 JavaScript 工具,特别是因为它们通常可以完成 jQuery 所做的所有事情,除非你不需要第三方库。

在这种情况下,查询选择器允许你选择要对其执行检查的元素,而 Element.matches() 方法允许你再次检查该类是否存在。

<div id="mydiv" class="myclass1 myclass2">My Element</div>
let element = document.querySelector("#mydiv");

console.log(element.matches('.myclass1'));

输出:

true

如你所见,这两种方法所需的代码在复杂性和长度方面或多或少相同。但是,查询选择器需要比 classList.contains() 方法更现代的浏览器,因此请记住这一点。

使用 indexOf() 检查元素是否包含 JavaScript 中的类

虽然现代浏览器支持上述两种方法,但你可能没有那么奢侈。因此,如果你的代码必须与非常旧的浏览器版本兼容,你也可以使用 indexOf() 方法来获得相同的结果。下面是它的工作原理:

<div id="mydiv" class="myclass1 myclass2">My Element</div>
let element = document.getElementById("mydiv");

function containsClass(element, className) {
    return (' ' + element.className + ' ').indexOf(' ' + className + ' ') > -1;
}

console.log(containsClass(element, "myclass1"));

输出:

true

自然,这种方法更加复杂,即使结果相同。本质上,我们创建了名为 containsClass 的方法,它遍历元素的类列表。

如果找到了我们要查找的类,那么它的索引将为 0 或更大,并且该方法将返回 true

相关文章 - JavaScript Class