在前端开发中，经常需要获取 HTML 元素的类名。虽然很多 JavaScript 库都可以轻松实现该功能，但如果想学习纯粹的 JavaScript 方法，则需要了解如何获取元素的类名。
获取单个元素的类名
要获取一个元素的类名，我们可以使用以下两种方法：
1. 使用 element.className 属性
每个 HTML 元素都有一个 className 属性，它是一个包含该元素所有类名的字符串。例如，以下 HTML 元素具有 "btn btn-primary" 两个类名：
------- ---------- ------------------ ------------
要获取该元素的类名，可以使用以下代码：
----- ------ - --------------------------------- ----- ---------- - ----------------- ------------------------ -- ---- ------------
此方法适用于单个元素，但如果您想要获取多个元素的类名，则需要遍历每个元素并一一获取其类名。
2. 使用 element.classList 属性
element.classList 属性返回一个 DOMTokenList 类型的对象，其中包含了该元素所有类名的列表。DOMTokenList 是一个只读对象，它提供了一些方法来操作类名列表，例如添加、删除、切换等。
以下 HTML 元素仍然具有 "btn btn-primary" 两个类名：
------- ---------- ------------------ ------------
要获取该元素的类名，可以使用以下代码：
----- ------ - --------------------------------- ----- ---------- - ----------------- ------------------------ -- ------- --------------
如果您只想获取第一个类名，可以使用 item() 方法：
----- ------ - --------------------------------- ----- -------------- - ------------------------- ---------------------------- -- -----
获取多个元素的类名
如果您想要获取多个元素的类名，则需要遍历每个元素并一一获取其类名。以下示例演示如何获取所有按钮的类名：
------- ---------- ------------------ ------------ ------- ---------- -------------------- -- ------------- ------- ---------- --------------- ---------------
----- ------- - ------------------------------------ ---------------------- -- - ----- ---------- - ----------------- ------------------------ -- ------- -------------- - ------- ---------------- - ------- -------------- ---
结论
获取元素的类名是前端开发中的一项基本任务，这篇文章讨论了两种方法来实现该目标：使用 className 属性和使用 classList 属性。如果您只需要获取单个元素的类名，则使用 className 更为简单；如果您需要获取多个元素的类名，则使用 classList 更为方便。无论哪种方法，都不需要使用任何 JavaScript 库即可实现该功能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28086