如何在 HTMLCollection 上使用 forEach - JavaScript

在 JavaScript 中，HTMLCollection 是一种类数组对象，用于存储在特定文档中的元素节点。使用 forEach 方法可以轻松地对 HTMLCollection 进行遍历，以执行特定操作。在本文中，我们将介绍如何在 HTMLCollection 上使用 forEach。

使用 forEach 遍历 HTMLCollection

我们可以使用以下代码示例来遍历 HTMLCollection 对象：

const elements = document.getElementsByClassName('my-class');
Array.from(elements).forEach(element => {
  // 执行操作
});

上述代码首先使用 getElementsByClassName 方法从文档中获取所有类名为 "my-class" 的元素。然后，将 HTMLCollection 转换为数组，使用 Array.from 方法。最后，我们可以使用 forEach 方法对数组中的每个元素执行操作。

在函数中使用 forEach

下面是一个更实际的示例，展示如何在函数中使用 forEach 遍历 HTMLCollection：

function doSomethingWithElements(elements) {
  Array.from(elements).forEach(element => {
    // 执行操作
  });
}

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

在上述示例中，我们使用了 doSomethingWithElements 函数来处理元素。该函数接收一个 HTMLCollection 对象作为参数，并使用 forEach 遍历其所有元素。可以通过将 HTMLCollection 作为参数传递给该函数来调用该函数。

总结

虽然 HTMLCollection 对象有些限制，但使用 forEach 方法可以轻松地遍历其所有元素，以执行特定操作。我们可以将 HTMLCollection 转换为数组，然后使用 forEach 方法对每个元素执行操作。或者，我们可以编写一个单独的函数来处理所有元素。