我想迭代一些 DOM 元素,我正在这样做:
document.getElementsByClassName( "myclass" ).forEach( function(element, index, array) {
//do stuff
});
但我得到一个错误:
document.getElementsByClassName("myclass").forEach is not a function
我使用的是 Firefox 3,所以我知道 getElementsByClassName
和 Array.forEach
都存在。这工作正常:
[2, 5, 9].forEach( function(element, index, array) {
//do stuff
});
getElementsByClassName
的结果是一个数组吗?如果不是,那是什么?
最佳答案
不,它不是一个数组。如specified in DOM4 , 这是一个 HTMLCollection
(至少在现代浏览器中。旧版浏览器返回 NodeList
)。
在所有现代浏览器(几乎所有其他 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);
});
关于javascript - 使用 Array.forEach 迭代 getElementsByClassName 的结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3871547/