JS:使用Array.forEach迭代getElementsByClassName的结果
我想迭代一些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的结果是数组吗？如果不是，那是什么？
回答 10
Stack Overflow用户
发布于 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);
});Stack Overflow用户
发布于 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);Stack Overflow用户
发布于 2017-05-13 16:10:20
您也可以使用返回querySelectorAll 的
document.querySelectorAll('.myclass').forEach(...)受现代浏览器支持(包括Edge，但不支持IE)：
https://stackoverflow.com/questions/3871547
复制相似问题