JavaScript【 getElementById 】 ～ id 名を指定してデータを取得

getElementById は、HTMLのタグ内で指定したid 名にマッチするドキュメント要素を取得するメソッドです。
今回は、getElementById メソッドを使用して、Webサイトの画面から入力された値を取得する方法について紹介します。

目次

　
１．getElementById メソッド
２．textContent プロパティで表示テキストを取得
３．value プロパティで入力値を取得

１．getElementById メソッド

　
getElementById メソッドは、HTMLタグ内で指定した id 名にマッチするドキュメント要素を取得する Elementオブジェクトのメソッドです。

次のように記述して使用します。

document ．getElementById（ ” id 名 ” ）；

引数に HTMLタグ内で指定した id 名を指定します。
　

<p id="dat"">Hello！</p>

上記の p タグ内で指定した id 名「 dat 」を指定して、次のように getElementById メソッドを記述します。

document.getElementById("dat");

「 document.getElementById(“dat”) 」の返り値は Element オブジェクトで、その内容を画面上に表示すると次のようになります。

　
これだけでは、指定した p 要素の内容は不明です。

因みに、「 console.log(document.getElementById(“dat”)); 」として、Element オブジェクトの内容をコンソールに出力すると、次のように表示されます。

▲目次へ戻る

　

２．textContent プロパティで表示テキストを取得

　
先ほどのサンプルで、p 要素「 <p id=”dat”>Hello！</p> 」内で通常必要となる値は、表示テキストの「 Hello！ 」の部分だと思います。

表示テキストの内容を取得する場合は、getElementById メソッドを次のように記述して使用します。

document ．getElementById（ ” id 名 ” ） ．textContent；

表示テキストの内容は、getElementById メソッドに textContent プロパティを付けて取得します。

「 document.getElementById(“dat”).textContent 」を出力すると、次のようになります。

　
テキスト内容の「 Hello! 」が取得できました。

▲目次へ戻る

　

３．value プロパティで入力値を取得

　
getElementById メソッドは、Webサイトの画面で入力された値を JavaScript 側で取得する場合に よく使用します。

画面の入力値を取得する際には、getElementById メソッドを次のように記述して使用します。

document ．getElementById（ ” id 名 ” ） ．value；

入力値は、getElementById メソッドに value プロパティを付けて取得します。

valueプロパティの値は 文字列となるため、「 document ．getElementById（ ” id 名 ” ） ．value 」の返り値は 全て文字列となります。
　
　
次のサンプルは、上のテキストボックスで入力された値を 下のテキストボックスに表示するプログラムです。
文字等を入力して、表示ボタンをクリックしてみて下さい。

　
ソースコードは次の通りです。

<script type="text/javascript">
<!--
function disp() {
    document.getElementById("dat_out").value =
        document.getElementById("dat_in").value;
}
//-->
</script>

<div style="background-color : #CCC;">
    <input type="text" id="dat_in" placeholder="ここに入力して下さい">
    <nobr><input type="button" value="表示" onClick="disp()"></nobr>　　
    <input type="text" id="dat_out" placeholder="入力内容をここに表示します">　
</div>

　
「 document.getElementById(“dat_out”).value = document.getElementById(“dat_in”).value; 」で、id 名「 dat_out 」のテキストボックスの内容を、id 名「 dat_in 」のテキストボックスの内容に変更しています。

このように、入力値を取得する際にも、内容を変更する際にも「 document ．getElementById（ ” id 名 ” ） ．value 」を使用します。

▲目次へ戻る