SYNCERのロゴ
アイキャッチ画像

集合を配列に変換する方法

例えば、getElementsByClassName()で取得できるHTMLCollection、childNodesで取得できるNodeListは、配列のようにインデックス番号で値を取り出せますが、正確には配列じゃないため、配列系のメソッドを利用できません。これらを配列として扱いたい場合は、Array.from()[].slice.call()を利用しましょう。

サンプルコード

下記のHTMLCollectionを配列に変換します。

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

// 配列じゃないので、配列のプロトタイプメソッドは利用できない
elements.forEach( func ) ;	// Error

一般的なブラウザの場合

Array.from()を利用します。Ie以外は対応しています。

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

// 配列なので、配列のプロトタイプメソッドを利用できる
elements.forEach( function ( element ) {
	console.log( element.tagName ) ;
} ) ;

Ieに対応する場合

何らかの事情でIeにも対応しなければいけない場合は、[].slice.call()を利用しましょう。

// 配列に変換
elements = [].slice.call( elements ) ;

// 配列なので、配列のプロトタイプメソッドを利用できる
elements.forEach( function ( element ) {
	console.log( element.tagName ) ;
} ) ;

デモ

HTMLCollectionを配列に変換し、forEach()で何らかの処理をする例です。

Array.from()

var elements = document.getElementsByClassName( "hoge" ) ;

elements = Array.from( elements ) ;

elements.forEach( function ( element ) {
	console.log( element.tagName ) ;
} ) ;

[].slice.call()

var elements = document.getElementsByClassName( "hoge" ) ;

elements = [].slice.call( elements ) ;

elements.forEach( function ( element ) {
	console.log( element.tagName ) ;
} ) ;

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年8月9日 (水)
コンテンツを公開しました。