学习DOM操作遇报错：forEach方法为何无法作用于HTMLCollection？

报错原因 #

document.getElementsByClassName('test')返回的是HTMLCollection——这是一个类数组的DOM元素集合，但它不是标准的JavaScript数组。早期的HTMLCollection并没有内置forEach方法，所以直接调用就会出现test.forEach is not a function的错误。

虽说现在部分现代浏览器已经给HTMLCollection加了forEach支持，但为了兼容更多场景（比如旧版浏览器），不建议直接依赖这个特性。

解决办法 #

下面几种方法都能实现遍历需求：

1. 转成真正的数组再用forEach #

用Array.from()把类数组转成数组：

const test = document.getElementsByClassName('test');
Array.from(test).forEach(item => {
    console.log(item);
});

或者用扩展运算符快速转换：

const test = document.getElementsByClassName('test');
[...test].forEach(item => {
    console.log(item);
});

2. 使用for...of循环 #

ES6的迭代器语法，直接遍历类数组对象：

const test = document.getElementsByClassName('test');
for (const item of test) {
    console.log(item);
}

3. 传统for循环 #

最兼容的方式，所有浏览器都能跑：

const test = document.getElementsByClassName('test');
for (let i = 0; i < test.length; i++) {
    console.log(test[i]);
}

4. 改用querySelectorAll（按需选择） #

如果不需要集合随DOM变化自动更新，可以用document.querySelectorAll('.test')，它返回的NodeList在所有现代浏览器里都自带forEach方法：

const test = document.querySelectorAll('.test');
test.forEach(item => {
    console.log(item);
});

注意：NodeList是静态集合，DOM变化后不会自动刷新；HTMLCollection是动态集合，DOM改动时会同步更新，根据你的需求选就行。

内容的提问来源于stack exchange，提问作者suyashpatil