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したい時のまとめ
- getElementsByClassNameの戻り値は、HTMLコレクション(forEachできない)
- getElementsByClassNameの戻り値に、Array.fromメソッドを使用する(戻り値は配列)
- Array.fromメソッドの戻り値にforEachする