指定したIDのHTML要素 (DOMオブジェクト) を取得する - JavaScript

JavaScriptを利用して指定したIDのHTML要素 (DOMオブジェクト) を取得するコードを紹介します。

概要

指定したIDのHTML要素(DOMオブジェクト)を取得する場合は documentオブジェクトの getElementById メソッドを利用します。

書式

document.getElementById("[取得する要素のID]");

第一引数に与えたIDの要素を戻り値として返します。要素がない場合は null を返します。一般的には戻り値を変数に代入して利用します。

プログラム例

コード

下記のHTMLファイルを記述します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <style>
    <!--
    .divelem{
      border:1px solid #ff6a00;
      width:240px;
      margin: 0.5rem 0 0 0;
    }
    -->
  </style>
  <script type="text/javascript">
    function onButtonClick() {
      var elem = document.getElementById("elem2");
      var outelem = document.getElementById("output");
      elem.style.borderColor = "#007bba";
      outelem.innerText = elem.innerText;
    }
  </script>
</head>
<body>
  <div class="divelem" id="elem1">これは要素1です</div>
  <div class="divelem" id="elem2">これは要素2です</div>
  <div class="divelem" id="elem3">これは要素3です</div>
  <hr />
  <input type="button" onclick="onButtonClick();" value="Exec"/>
  <hr />
  <div id="output"></div>
</body>
</html>

解説

IDがelem1 elem2 elem3 の3つのDIV枠と、出力用のIDが output の枠を用意します。また、ボタンを配置しています。ボタンをクリックすると onButtonClick()関数を実行します。

onButtonClick関数では、id=elem2 の要素を取得します。また、出力用の id=output の要素も取得します。 elem2の要素のボーダーカラーを "#007bba" に変更し、elem2 の内部のテキストを output の内部テキストに設定します。

    function onButtonClick() {
      var elem = document.getElementById("elem2");
      var outelem = document.getElementById("output");
      elem.style.borderColor = "#007bba";
      outelem.innerText = elem.innerText;
    }