如何在 JavaScript 中按类获取元素？

在前端开发中，我们经常需要按类获取 DOM 元素。这时候，我们可以使用 document.querySelectorAll() 方法来实现。

语法

var elements = document.querySelectorAll(".class");

其中，.class 表示要获取的类名。

示例

假设我们有如下 HTML 结构：

<div class="container">
  <p class="text">Hello, World!</p>
  <p class="text">How are you doing?</p>
</div>

如果我们想获取所有类名为 text 的 <p> 元素，可以这样做：

var elements = document.querySelectorAll(".text");

// 遍历全部匹配的元素
for (var i = 0; i < elements.length; i++) {
  console.log(elements[i].textContent);
}

输出结果如下：

Hello, World!
How are you doing?

注意事项

1. 类名前需要加上 .。
2. 返回的是一个 NodeList 对象，类似于数组。
3. 可以通过遍历 NodeList 来操作得到的元素。
4. 如果没有匹配的元素，将返回空 NodeList。

总结

在前端开发中，按类获取元素是很常见的需求。使用 document.querySelectorAll() 方法可以方便地实现这一功能。在使用时需要注意类名前需要加上 .，并且返回的是一个 NodeList 对象，需要通过遍历来操作得到的元素。

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