javascript - 在getElementsByClassName的数组上使用forEach会导致 “TypeError: undefined is not a function”

在my JSFiddle中，我只是尝试遍历元素数组。日志语句证明，该数组为非空。但是，对forEach的调用给了我(不是那么有用)“未捕获的TypeError:undefined不是函数”错误。

我一定在做些愚蠢的事。我究竟做错了什么？

我的代码:

var arr = document.getElementsByClassName('myClass');
console.log(arr);
console.log(arr[0]);
arr.forEach(function(v, i, a) {
  console.log(v);
});

.myClass {
  background-color: #FF0000;
}

<div class="myClass">Hello</div>

最佳答案

这是因为document.getElementsByClassName返回的是HTMLCollection，而不是数组。

幸运的是，它是一个"array-like" object(它解释了为什么记录它就像是一个对象，以及为什么可以使用标准for循环进行迭代)，因此可以执行以下操作:

[].forEach.call(document.getElementsByClassName('myClass'), function(v,i,a) {

使用ES6(在现代浏览器或Babel上)，您还可以使用 Array.from 从类似数组的对象构建数组:

Array.from(document.getElementsByClassName('myClass')).forEach(v=>{

或将类似数组的对象散布到数组中:

[...document.getElementsByClassName('myClass'))].forEach(v=>{