在前端开发中，经常需要测试一个元素是否包含某个特定的类。这种情况通常在操作 DOM 元素时涉及到，比如根据类名选择元素、添加或删除类等。本文将介绍在 JavaScript 中如何测试一个元素是否包含一个类，并提供实用的示例代码。
使用 classList 属性
我们可以使用元素的 classList 属性来测试一个元素是否包含一个类。该属性返回一个 DOMTokenList 对象，它是一个只读的类数组对象，其中包含了元素的所有类名。通过检查该对象中是否包含指定的类名，就可以测试该元素是否包含相应的类。
下面是测试一个元素是否包含一个类的示例代码：
const element = document.getElementById('example');
if (element.classList.contains('my-class')) {
// 包含 my-class 类
} else {
// 不包含 my-class 类
}上述代码首先获取一个具有 ID 为 'example' 的元素，然后使用 classList.contains() 方法测试该元素是否包含名为 'my-class' 的类。如果包含该类，则执行相应的操作；否则，执行其他操作。
需要注意的是，classList.contains() 方法区分大小写，因此要确保类名的大小写与 HTML 中的一致。
使用 className 属性
另一种测试一个元素是否包含一个类的方法是使用元素的 className 属性。该属性返回一个字符串，其中包含元素的所有类名，使用空格分隔。我们可以通过检查该字符串中是否包含指定的类名来测试该元素是否包含相应的类。
下面是使用 className 属性测试一个元素是否包含一个类的示例代码：
const element = document.getElementById('example');
if (element.className.indexOf('my-class') !== -1) {
// 包含 my-class 类
} else {
// 不包含 my-class 类
}上述代码首先获取一个具有 ID 为 'example' 的元素，然后使用 indexOf() 方法测试该元素的类名字符串中是否包含名为 'my-class' 的类。如果包含该类，则执行相应的操作；否则，执行其他操作。需要注意的是，indexOf() 方法返回匹配到的字符位置，如果没有匹配到则返回 -1。因此上述代码使用 !== -1 来表示包含该类。
示例代码
以下是一个完整的示例代码，演示如何使用 classList 和 className 属性测试一个元素是否包含一个类：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------------
-------
------
---- ------------ --------------- -------------------
--------
-- -- --------- -------
----- -------- - -----------------------------------
-- ----------------------------------------- -
--------------- -------- ----
- ---- -
---------------- -------- ----
-
-- -- --------- -------
----- -------- - -----------------------------------
-- --------------------------------------- --- --- -
--------------- -------- ----
- ---- -
---------------- -------- ----
-
---------
-------
-------上述示例代码首先定义了一个具有 ID 为 'example' 的 div 元素，并给它添加了两个类名，分别是 'my-class' 和 'other-class'。然后使用 classList 和 className 属性测试该元素是否包含名为 'my-class' 的类。如果包含，则在控制台中输出相应的信息；否则，输出其他信息。
结论
在前端开发中，测试一个元素是否包含一个类是一项基本操作。我们可以使用元素的 classList 或 className 属性来测试一个元素是否
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8724