微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

使用 Array.forEach 迭代 getElementsByClassName 的结果

如何解决使用 Array.forEach 迭代 getElementsByClassName 的结果

不,它不是一个数组。正如DOM4 中指定的那样,它是一个HTMLCollection(至少在现代浏览器中。旧版浏览器返回 aNodeList)。

在所有现代浏览器(几乎所有其他 IE <= 8)中,您都可以调用 Array 的forEach方法,将元素列表(无论是它HTMLCollection还是NodeList)作为this值传递给它:

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

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

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

如果您能够使用 ES6(即您可以放心地忽略 Internet Explorer 或者您正在使用 ES5 转译器),您可以使用Array.from

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

解决方法

我想迭代一些 DOM 元素,我正在这样做:

document.getElementsByClassName( "myclass" ).forEach( function(element,index,array) {
  //do stuff
});

但我收到一个错误:

document.getElementsByClassName(“myclass”).forEach 不是函数

我正在使用 Firefox 3,所以我知道两者getElementsByClassNameArray.forEach存在。这工作正常:

[2,5,9].forEach( function(element,array) {
  //do stuff
});

getElementsByClassName数组的结果吗?如果不是,那是什么?

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。