ITコラム

Digital tablet pc showing job application form

JavaScript

2017.12.06

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

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

目次

 
1.getElementById メソッド
2.textContent プロパティで表示テキストを取得
3.value プロパティで入力値を取得

1.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 オブジェクトで、その内容を画面上に表示すると次のようになります。

Hello!

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

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

▲目次へ戻る

 

2.textContent プロパティで表示テキストを取得

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

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

document .getElementById( ” id 名 ” ) .textContent;

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

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

Hello!

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

▲目次へ戻る

 

3.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 」を使用します。

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.