[JavaScript] 要素の集合体をを配列として取得する（Array.from）

投稿日：2018年4月25日更新日：2018年4月28日

要素の集合体をを配列として取得するには、Array.fromを使用します。

サンプルソース

例）"c1"クラスを持つ要素を配列として処理する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample</title>
<script>
function test(){
  //"c1"クラスを持つ要素の集合体を取得する
  var objs = document.getElementsByClassName("c1");

  //取得した集合体を配列に変換する
  var arr = Array.from(objs);

  //配列なのでforEachメソッドが使用できる
  arr.forEach(function(obj){
    console.log(obj.id);
  });
}
</script>
</head>
<body>
  <input type="button" onclick="test()" value="ボタン">
  <ul>
    <li id="a1" class="c1">aaa</li>
    <li id="a2">bbb</li>
    <li id="a3" class="c1">ccc</li>
    <li id="a4">ddd</li>
    <li id="a5" class="c1">eee</li>
    <li id="a6">fff</li>
  </ul>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Sample</title>

function test(){

//"c1"クラスを持つ要素の集合体を取得する

var objs = document.getElementsByClassName("c1");

//取得した集合体を配列に変換する

var arr = Array.from(objs);

//配列なのでforEachメソッドが使用できる

arr.forEach(function(obj){

console.log(obj.id);

});

}

</script>

</head>

<body>

<ul>

</ul>

</body>

</html>

（結果）: a1 a3 a5

解説

引数にnullを渡すと例外が発生します。

執筆者：とら