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

(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エレメントの配列みたいなものだった。JavaScriptの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したい時のまとめ

  1. getElementsByClassNameの戻り値は、HTMLコレクション(forEachできない)
  2. getElementsByClassNameの戻り値に、Array.fromメソッドを使用する(戻り値は配列)
  3. Array.fromメソッドの戻り値にforEachする

 

 

 

記事が気に入った方はシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。