我想迭代一些DOM元素,我这样做:
document.getElementsByClassName( "myclass" ).forEach( function(element, index, array) {
//do stuff
});
但我得到一个错误:
document.getElementsByClassName("myclass").forEach不是一个函数
我使用的是Firefox3,所以我知道getElementsByClassName
和Array.forEach
都存在。这可以很好地工作:
[2, 5, 9].forEach( function(element, index, array) {
//do stuff
});
getElementsByClassName
的结果是数组吗?如果不是,那是什么?
发布于 2010-10-06 18:36:12
不是的。作为specified in DOM4,它是一个HTMLCollection
(至少在现代浏览器中是这样。较旧的浏览器返回一个NodeList
)。
在所有现代浏览器(几乎所有其他IE <= 8)中,您可以调用数组的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);
});
发布于 2016-06-21 18:22:39
您可以使用Array.from
将集合转换为数组,这比Array.prototype.forEach.call
干净得多
Array.from(document.getElementsByClassName("myclass")).forEach(
function(element, index, array) {
// do stuff
}
);
在不支持Array.from
的老浏览器中,你需要使用像Babel这样的东西。
ES6还添加了以下语法:
[...document.getElementsByClassName("myclass")].forEach(
(element, index, array) => {
// do stuff
}
);
使用...
的Rest解构适用于所有类似数组的对象,而不仅仅是数组本身,然后使用良好的旧数组语法从值构造数组。
虽然替代函数querySelectorAll
(这会使getElementsByClassName
过时)返回一个本机具有forEach
的集合,但缺少其他方法,如map
或filter
,因此此语法仍然有用:
[...document.querySelectorAll(".myclass")].map(
(element, index, array) => {
// do stuff
}
);
[...document.querySelectorAll(".myclass")].map(element => element.innerHTML);
发布于 2017-05-13 16:10:20
您也可以使用返回querySelectorAll
的
document.querySelectorAll('.myclass').forEach(...)
受现代浏览器支持(包括Edge,但不支持IE):
https://stackoverflow.com/questions/3871547
复制相似问题