JavaScript 获取元素的类名（不使用任何库）

在前端开发中，经常需要获取 HTML 元素的类名。虽然很多 JavaScript 库都可以轻松实现该功能，但如果想学习纯粹的 JavaScript 方法，则需要了解如何获取元素的类名。

获取单个元素的类名

要获取一个元素的类名，我们可以使用以下两种方法：

1. 使用 element.className 属性

每个 HTML 元素都有一个 className 属性，它是一个包含该元素所有类名的字符串。例如，以下 HTML 元素具有 "btn btn-primary" 两个类名：

<button class="btn btn-primary">Click me!</button>

要获取该元素的类名，可以使用以下代码：

const button = document.querySelector('button');
const classNames = button.className;
console.log(classNames); // 'btn btn-primary'

此方法适用于单个元素，但如果您想要获取多个元素的类名，则需要遍历每个元素并一一获取其类名。

2. 使用 element.classList 属性

element.classList 属性返回一个 DOMTokenList 类型的对象，其中包含了该元素所有类名的列表。DOMTokenList 是一个只读对象，它提供了一些方法来操作类名列表，例如添加、删除、切换等。

以下 HTML 元素仍然具有 "btn btn-primary" 两个类名：

<button class="btn btn-primary">Click me!</button>

要获取该元素的类名，可以使用以下代码：

const button = document.querySelector('button');
const classNames = button.classList;
console.log(classNames); // ['btn', 'btn-primary']

如果您只想获取第一个类名，可以使用 item() 方法：

const button = document.querySelector('button');
const firstClassName = button.classList.item(0);
console.log(firstClassName); // 'btn'

获取多个元素的类名

如果您想要获取多个元素的类名，则需要遍历每个元素并一一获取其类名。以下示例演示如何获取所有按钮的类名：

<button class="btn btn-primary">Click me!</button>
<button class="btn btn-secondary">Click me too!</button>
<button class="btn btn-success">Me three!</button>

const buttons = document.querySelectorAll('button');
buttons.forEach(button => {
  const classNames = button.classList;
  console.log(classNames); // ['btn', 'btn-primary'] / ['btn', 'btn-secondary'] / ['btn', 'btn-success']
});

结论

获取元素的类名是前端开发中的一项基本任务，这篇文章讨论了两种方法来实现该目标：使用 className 属性和使用 classList 属性。如果您只需要获取单个元素的类名，则使用 className 更为简单；如果您需要获取多个元素的类名，则使用 classList 更为方便。无论哪种方法，都不需要使用任何 JavaScript 库即可实现该功能。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28086