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

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

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

サンプルソース

例）idが'txt1'の要素を取得してvalue値を表示する

function test(){
  //id="txt1"のオブジェクトを取得する
  var obj = document.getElementById("txt1");
  document.write(obj.value);
}

function test(){

//id="txt1"のオブジェクトを取得する

var obj = document.getElementById("txt1");

document.write(obj.value);

}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Sample</title>
  <script src="sample.js"></script>
</head>
<body>
  <input type="text" id="txt1" value="hoge" />
  <input type="button" value="ボタン" onclick="test();" />
</body>
</html>

<!DOCTYPE html>

<head>

<title>Sample</title>

</head>

<body>

</body>

</html>

（結果）: hoge

解説

document.getElementByIdは、指定したidを持つオブジェクトを取得します。
戻り値はオブジェクト型です。（コレクション型ではなく単体のオブジェクトです）
指定したidを持つオブジェクトが無い場合はnullが返ります

執筆者：とら