JS：在 `getElementsByClassName` 使用 `Array.forEach` 结果迭代

在前端开发中，我们经常会使用 getElementsByClassName 方法获取一组元素，并对它们进行操作。然而，在处理这些元素时，我们可能需要对它们进行迭代，对于这种情况，可以使用数组方法 Array.forEach。

getElementsByClassName

getElementsByClassName 是一个 DOM 方法，用于从当前文档中返回带有指定类名的所有元素作为一个类数组对象。例如：

const elements = document.getElementsByClassName('my-class');

上述代码将返回一个类似数组的对象，包含了所有具有 my-class 类名的元素。

Array.forEach

Array.forEach 是 JavaScript 数组的一个迭代方法，它接受一个回调函数作为参数，该函数将被传递给数组中的每个元素。例如：

const arr = [1, 2, 3];
arr.forEach((value, index) => {
  console.log(value, index);
});

上述代码将输出：

1 0
2 1
3 2

结合使用

结合使用 getElementsByClassName 和 Array.forEach 可以方便地处理一组元素。例如：

<div class="my-class">1</div>
<div class="my-class">2</div>
<div class="my-class">3</div>

const elements = document.getElementsByClassName('my-class');
Array.from(elements).forEach((element, index) => {
  console.log(element.textContent, index);
});

上述代码将输出：

1 0
2 1
3 2

需要注意的是，getElementsByClassName 返回的是一个类数组对象，而不是真正的数组。因此，我们需要使用 Array.from 将其转换为真正的数组，才能使用 forEach 方法。

深度与学习

结合使用 getElementsByClassName 和 Array.forEach 是前端开发中非常常见的操作之一。通过掌握这种技巧，可以更加高效地处理一组元素，避免了手动遍历的冗长代码。

同时，这也是对 JavaScript 数组方法的深度学习的一个很好的机会。当我们掌握了 Array.forEach 等方法后，就可以更加方便地操作和处理数据。

指导意义

在使用 getElementsByClassName 和 Array.forEach 进行迭代操作时，需要注意以下几点：

• getElementsByClassName 返回的是一个类数组对象，需要转换为真正的数组才能使用 forEach 方法。
• 回调函数接受两个参数：当前元素和当前索引。
• 在回调函数中，可以使用 this 关键字获取当前元素。

最后，附上完整示例代码：

<div class="my-class">1</div>
<div class="my-class">2</div>
<div class="my-class">3</div>

const elements = document.getElementsByClassName('my-class');
Array.from(elements).forEach(function(element, index) {
  console.log(this.textContent, index);
});

希望本文对大家在前端开发中使用 getElementsByClassName 和 Array.forEach 有所帮助。

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