为什么 `forEach` 不能直接在 `HTMLCollection` 上工作？

使用 Array.forEach 迭代 HTMLCollection

在这种困境中，开发人员尝试使用 document.getElementsByClassName("myclass").forEach 迭代 DOM 元素只是为了遇到错误，指出“.forEach 不是

理解 HTMLCollection

解决此错误的关键在于理解 getElementsByClassName 返回结果的性质。与它的名称相反，它不生成数组，而是生成 HTMLCollection。 HTMLCollection 与 NodeList 非常相似，遵循 DOM4 规范，与传统数组有微妙但重要的区别。

将 HTMLCollection 转换为数组

要利用强大的 forEach 方法，必须首先将HTMLCollection 放入数组中。有几种方法可以完成此转换：

使用 Array.prototype.forEach.call:

var els = document.getElementsByClassName("myclass");

Array.prototype.forEach.call(els, function(el) {
  // Do stuff here
  console.log(el.tagName);
});

使用 [].forEach.call:

[].forEach.call(els, function (el) {...});

使用Array.from (ES6):

Array.from(els).forEach((el) => {
  // Do stuff here
  console.log(el.tagName);
});

通过将 HTMLCollection 转换为数组，可以利用大量的数组方法（包括 forEach）来高效地处理和操作 DOM 元素。

以上是为什么 `forEach` 不能直接在 `HTMLCollection` 上工作？的详细内容。更多信息请关注PHP中文网其他相关文章！