为什么 `getElementsByClassName` 不直接与 `forEach` 一起使用？

Array.forEach 方法：与 getElementsByClassName

的兼容性

在尝试使用 getElementsByClassName 方法迭代 DOM 元素时，开发人员可能会遇到特殊错误：“document.getElementsByClassName('myclass').forEach 是不是一个函数。”尽管 Firefox 3 中同时存在 getElementsByClassName 和 Array.forEach，但错误仍然存​​在。

之所以会出现混乱，是因为 getElementsByClassName 的结果不是数组。在现代浏览器中，它是一个 HTMLCollection，一个专门为 HTML 元素量身定制的集合。尽管它具有类似数组的属性，但它不是真正的数组。

要解决该问题并成功迭代元素，开发人员可以使用一个技巧：他们可以调用 Array 的 forEach 方法，将 HTMLCollection 作为这个值：

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

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

这种技术允许迭代按预期进行。或者，开发人员可以使用 ES6 环境中可用的 Array.from 在迭代之前将 HTMLCollection 转换为数组：

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

通过利用这些技术，开发人员可以有效地迭代通过 getElementsByClassName 获取的 DOM 元素，确保与 Array.forEach 方法的兼容性。

以上是为什么 `getElementsByClassName` 不直接与 `forEach` 一起使用？的详细内容。更多信息请关注PHP中文网其他相关文章！