首页 > web前端 > js教程 > 为什么 `document.getElementsByClassName().forEach` 不起作用,如何修复它?

为什么 `document.getElementsByClassName().forEach` 不起作用,如何修复它?

DDD
发布: 2024-12-06 07:39:11
原创
876 人浏览过

Why Doesn't `document.getElementsByClassName().forEach` Work, and How Can I Fix It?

将 Array.forEach 与 getElementsByClassName 结合使用

尝试使用 document.getElementsByClassName( "myclass" ).forEach 迭代 DOM 元素时,一可能会遇到错误“document.getElementsByClassName(“myclass”).forEach 不是函数。”出现这种情况是因为 getElementsByClassName 的结果不是数组,而是 HTMLCollection。

要解决此问题,必须在使用 forEach 之前将 HTMLCollection 转换为数组。这可以使用 Array.prototype.forEach.call 方法和 HTMLCollection 作为 this 值来完成:

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) {...});
登录后复制

在ES6中,可以使用Array.from函数:

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

以上是为什么 `document.getElementsByClassName().forEach` 不起作用,如何修复它?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板