【備忘録：javascript】HTMLcollectionでのforEach

document.getElementsByClassNameで取得したクラスが回せなかった

hoge.js

let elem = document.getElementsByClassName('m-hoge');

上記のように特定のクラスを取得しそのテキストを手に入れたかったのですが、

hoge.js

let elem = document.getElementsByClassName('m-hoge');

elem.forEach(function(item) {
  console.log(item.innerHTML);
});

このようにforEachをしても取れませんでした。

HTMLcollectionは配列ではない

参考にさせていただいたページが分かりやすかったのですが、HTMLcollectionはそもそも配列ではないとのことです。
取得しているときは配列っぽいですが、配列でないため、配列で使用するメソッド（今回でいうとforEach）が使用できないのです。

対策

対策として、Array.prototypeを使用して対応することができました。

hoge.js

let elem = document.getElementsByClassName('m-hoge');

Array.prototype.forEach.call(elem, function(item) {
  console.log(item.innerHTML);
}

まとめ

分からないことがたくさんあるので、しっかり理解して進めて行きたいと思います。

参考ページ