集合を配列に変換する方法
例えば、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 ) ;
} ) ;
あいうえお
関連記事
- 配列の重複する要素を削除する方法
- PHPのarray_unique()のように配列の重複した要素を削除します。
- 何番目の要素か確認する方法
- 要素が何番目にあるのかを確認するには、配列系メソッドのindexOf()を利用しましょう。
- ラジオボタンの値をセットする方法
- ラジオボタンを選択状態にするには、要素のcheckedプロパティにtrueを代入します。