JS 获取类名|极客笔记

JS 获取类名

在开发网页时，经常会遇到需要获取元素的类名的情况，以方便我们根据类名来对元素进行相应的操作。在 JavaScript 中，我们可以使用一些方法来获取元素的类名，本文将详细介绍如何使用 JavaScript 来获取元素的类名，并且会提供一些示例代码。

1. 通过 className 属性获取类名

在 JavaScript 中，每个元素都有一个 className 属性，用来表示元素的类名。我们可以通过这个属性来获取元素的类名，例如：

const element = document.getElementById('myElement');
const className = element.className;
console.log(className); //输出元素的类名字符串

上面的代码中，我们通过 document.getElementById 方法获取id为myElement的元素，然后通过 className 属性获取到元素的类名，最后通过 console.log 打印出来。

2. 通过 classList 属性获取类名

除了使用 className 属性外，我们还可以使用 classList 属性来获取元素的类名。classList 是一个包含了元素类名的集合，这个属性还提供了一些方法来方便我们对类名进行操作，比如添加、删除、切换类名等操作。下面是一个使用 classList 获取元素类名的示例：

const element = document.getElementById('myElement');
const classNames = element.classList;
console.log(classNames); //输出元素的类名集合

上面的代码中，我们同样通过 document.getElementById 方法获取id为myElement的元素，然后通过 classList 属性获取到元素的类名集合，最后通过 console.log 打印出来。

3. 通过 getElementsByClassName 方法获取类名

除了直接获取单个元素的类名外，我们还可以通过 getElementsByClassName 方法来获取拥有相同类名的一组元素。这个方法返回一个包含了所有拥有指定类名的元素的 HTMLCollection 集合。下面是一个使用 getElementsByClassName 方法获取元素类名的示例：

const elements = document.getElementsByClassName('myClass');
for (let i = 0; i < elements.length; i++) {
    const className = elements[i].className;
    console.log(className); //输出每个元素的类名
}

上面的代码中，我们通过 document.getElementsByClassName 方法获取类名为myClass的所有元素，然后使用 for 循环遍历集合中的每个元素，通过 className 属性获取每个元素的类名，最后通过 console.log 打印出来。