[JavaScript] name名からオブジェクトを取得する

投稿日：2016年10月1日更新日：2018年5月3日

タグに付けられたname名からオブジェクトを取得するには、 document.getElementsByNameを使用します。

サンプルソース

例）nameが'rdo1'の要素を全て取得してvalue値を表示する

function test(){
  //name='rdo1'の要素一覧を取得する
  var elements = document.getElementsByName("rdo1");

  //取得した一覧から全てのvalue値を表示する
  for(var i=0;i<elements.length;i++){
    document.write(elements[i].value);
  }
}

function test(){

//name='rdo1'の要素一覧を取得する

var elements = document.getElementsByName("rdo1");

//取得した一覧から全てのvalue値を表示する

for(var i=0;i<elements.length;i++){

document.write(elements[i].value);

}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Sample</title>
  <script src="sample.js"></script>
</head>
<body>
  <input type="radio" name="rdo1" value="01" />
  <input type="radio" name="rdo1" value="02" />
  <input type="radio" name="rdo1" value="03" />
  <input type="button" value="ボタン" onclick="test();" />
</body>
</html>

<!DOCTYPE html>

<head>

<title>Sample</title>

</head>

<body>

</body>

</html>

（結果）: 01 02 03

解説

document.getElementsByNameは、ページ内にある指定したname名を持つ全てのオブジェクトを取得します。そのため戻り値はリストで返ります。
戻り値の型はNodeList型です。
指定したnameが存在しない場合は、ゼロ件のリストが返ります。
（nullではありません）

執筆者：とら