获取所有 div 元素的方法 - JavaScript

在 Web 开发中，我们经常需要通过 JavaScript 来获取网页上的元素，其中最常见的元素之一就是 <div>。在本文中，我们将介绍如何使用 JavaScript 来获取所有 <div> 元素。

1. 通过标签名获取

获取所有 <div> 元素的最简单方法是使用 getElementsByTagName 方法。这个方法接受一个标签名作为参数，并返回一个包含所有该标签的元素的 HTMLCollection 对象。可以使用数组索引或循环来遍历这个 HTMLCollection，并对其中的每个元素进行操作。

下面是使用 getElementsByTagName 方法获取所有 <div> 元素的代码片段：

const divs = document.getElementsByTagName('div');

for (let i = 0; i < divs.length; i++) {
  // 对每个 div 元素进行操作
  console.log(divs[i]);
}

2. 通过 class 名获取

如果想要获取特定 class 名称的所有 <div> 元素，可以使用 getElementsByClassName 方法。这个方法接受一个 class 名作为参数，并返回一个包含所有具有该 class 的元素的 HTMLCollection 对象。

以下是使用 getElementsByClassName 方法获取所有 foo class 名的 <div> 元素的示例代码：

const divs = document.getElementsByClassName('foo');

for (let i = 0; i < divs.length; i++) {
  // 对每个 foo class 的 div 元素进行操作
  console.log(divs[i]);
}

3. 通过选择器获取

最灵活的获取 <div> 元素的方法是使用 querySelectorAll 方法。这个方法接受一个 CSS 选择器作为参数，返回一个包含符合该选择器的所有元素的 NodeList 对象。与 HTMLCollection 不同，NodeList 对象是静态的，因此调用 querySelectorAll 方法返回的 NodeList 包含的元素数量不会随着页面的改变而改变。

以下是使用 querySelectorAll 方法获取所有具有 foo class 名的 <div> 元素的示例代码：

const divs = document.querySelectorAll('div.foo');

for (let i = 0; i < divs.length; i++) {
  // 对每个具有 foo class 的 div 元素进行操作
  console.log(divs[i]);
}

总结

以上是获取所有 <div> 元素的三种常见方法，这些方法都使用了原生的 JavaScript API。根据不同的需求，选择不同的方法可以让我们更加高效地操作网页上的元素。