【JavaScript】HTMLコレクションを配列に直すArray.from()

HTMLコレクションとは?

ざっくりいうとHTMLコレクションとは、配列風のオブジェクトのことです。

例えば、getElementsByClassName()で取得できるHTMLCollectionは、配列のようにインデックス番号で値を取り出せますが、正確には配列じゃないため、forEatchなどの配列系のメソッドを利用できません。

ではHTMMLコレクションで取得したオブジェクトを配列として扱うにはどうしたら良いでしょうか?

配列に変換するArray.from()

HTMLコレクションをを配列として扱いたい場合は、Array.from()を使います。

// HTMLCollectionを取得
var elements = document.getElementsByClassName( "list" );

// 配列じゃないので、配列のプロトタイプメソッドは利用できない
elements.forEach( ele );	//Error
// HTMLCollectionを取得
var elements = document.getElementsByClassName( "list" );

// Array.from()で配列に変換
arrayElements = Array.from( elements );

// 配列なので、配列のプロトタイプメソッドを利用できる
arrayElements.forEach( function ( ele ) {

});
タイトルとURLをコピーしました