[解決済み] getElementsByClassNameから配列にforEachを使用すると、"TypeError: undefined is not a function "が発生する。

質問

で 私のJSFiddle では、私は単に要素の配列に対して反復処理を行おうとしています。ログステートメントが証明するように、配列は空でありません。しかし forEach を呼び出すと、(あまり役に立たない) "Uncaught 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 を返します。配列ではありません。

幸いなことに、それは "配列のような"オブジェクトです。 であり (これはあたかもオブジェクトであるかのように記録される理由と、標準的な 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=>{