正文

JavaScript原生获取元素class的几种方法：1. 使用getElementById或getElementsByClassName获取元素，然后通过元素的className属性获取class；2. 使用querySelector或querySelectorAll选择器直接获取具有特定class的元素；3.

/0 浏览量
0831

在开发网页应用时，我们经常需要操作 DOM 元素，其中获取元素的类（class）是常见的需求。以下将详细介绍三种常用的 JavaScript 原生方法来获取元素的 class。

方法一：使用 getElementById 或 getElementsByClassName 获取元素，然后通过元素的 className 属性获取 class

这种方法是最直接和常用的方式。以下是一个简单的例子：

// 获取 id 为 'myElement' 的元素
var element = document.getElementById('myElement');

// 获取元素的 class
var className = element.className;

console.log(className); // 输出元素的类名

如果你想要获取所有具有特定 class 的元素，可以使用 getElementsByClassName 方法：

// 获取所有 class 为 'myClass' 的元素
var elements = document.getElementsByClassName('myClass');

// 遍历元素集合并获取每个元素的类名
for (var i = 0; i < elements.length; i++) {
    var className = elements[i].className;
    console.log(className);
}

注意：getElementsByClassName 返回的是一个 HTMLCollection，而不是一个数组。因此，在进行迭代时，你需要使用传统的 for 循环而不是 forEach。

方法二：使用 querySelector 或 querySelectorAll 选择器直接获取具有特定 class 的元素

如果你熟悉 CSS 选择器，那么 querySelector 和 querySelectorAll 方法可以让你直接通过 CSS 选择器获取元素，而不需要先获取所有元素再筛选。以下是两个方法的示例：

// 使用 querySelector 获取具有特定 class 的第一个元素
var element = document.querySelector('.myClass');

// 使用 querySelectorAll 获取具有特定 class 的所有元素
var elements = document.querySelectorAll('.myClass');

// 遍历元素集合
elements.forEach(function(element) {
    console.log(element.className);
});

querySelector 返回匹配的元素集合中的第一个元素，而 querySelectorAll 返回所有匹配的元素集合。

方法三：使用 document.getElementsByClassName 获取所有具有指定 class 的元素集合

这个方法与 getElementById 类似，但是它是专门为类名设计的。以下是一个例子：

// 获取所有 class 为 'myClass' 的元素集合
var elements = document.getElementsByClassName('myClass');

// 遍历元素集合
for (var i = 0; i < elements.length; i++) {
    console.log(elements[i].className);
}

这个方法同样返回一个 HTMLCollection，因此在使用时需要使用 for 循环。

总结

以上三种方法各有优缺点。如果你只需要获取单个元素的类名，getElementById 或 querySelector 可能是更简单的方式。如果你需要获取具有特定类名的所有元素，getElementsByClassName 或 querySelectorAll 是更好的选择。在实际应用中，你可以根据具体需求和习惯选择最合适的方法。

-- 展开阅读全文 --