(JavaScript) getElementsByClassNameの結果をforEachしたい時の対処法

JavaScriptにて、
getElementsByClassNameで取得した結果（複数）に対して
forEachをしたいと思ってやってみたところつまづいたので、対処法と共にメモ。

つまづいたこと

getElementsByClassNameで取得した結果に対し、forEachメソッドを使用してみたら
「Uncaught TypeError: 取得結果.forEach is not a function」と言うエラーが出た。

var events = document.getElementsByClassName('Events');
    events.forEach(function(event) {
        console.log(event);
    });

#実行結果
Uncaught TypeError: events.forEach is not a function

getElementsByClassNameで取得した結果に対し、
そのままではforEachで回せないのね(￣^￣)

getElementsByClassNameの戻り値にforEachできなかった原因

forEachメソッドは配列に対して実行するメソッドなので、
実行できないと言うことはgetElementsByClassNameの戻り値は配列ではないと言うことだ。

なので何が入っているのか調べてみると

var events = document.getElementsByClassName('Events');
    console.log(events);

#実行結果
HTMLCollections [~以下略~]

HTMLコレクションと言うものが入っていた。
キーがインデックス、バリューがHTMLエレメントの配列みたいなものだった。

このままでは配列とは違いforEachには使えない。

上記を踏まえて、対処法（Array.fromメソッドを使う）

対処法としては、取得結果のHTMLコレクションに対し、
「Array.fromメソッド」を使用してやれば良い。

var events = document.getElementsByClassName('Events');
events = Array.from(events);

Array.fromメソッドの戻り値は配列なので、forEachメソッドが使えるようになっている。
Array.fromメソッドが何かと言う、以下MDN web docsより、

Array.from() メソッドは、配列のようなオブジェクトや反復可能オブジェクトから、浅くコピーされた新しい Array インスタンスを生成します。

引用元：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/from

「配列のようなオブジェクト」と言うのがHTMLコレクションのことで、そこから
「浅くコピーされた新しいArrayインスタンス（バリューの配列）」が取得できる。

なので、以下のようにすればやりたかったforEachメソッドが実行できる。

var events = document.getElementsByClassName('Events');
events = Array.from(events);
events.forEach(function(event) {
    console.log(event);
});

エラーが出ず、うまくいった。

getElementsByClassNameの結果をforEachしたい時のまとめ