JavaScriptを基本からまとめてみた【8】【getElementById】【随時更新】

##はじめに

####学習するに至った経緯

2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。
入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、
卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。

##getElementById
『getElementById』はHTMLのタグ内で指定したid名にマッチするドキュメント要素を取得する
メソッド。次のように記述して使用する。

document.getElementById("id 名");

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

sample.html

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

sample.js

document.getElementById("dat");

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

[object HTMLParagraphElement]

　
これだけでは、指定した p 要素の内容は不明。因みに、「 console.log(document.getElementById("dat")); 」として、
Element オブジェクトの内容をコンソールに出力すると、次のように表示される。

console.log

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

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

先ほどのサンプルで、p 要素

Hello！

内で通常必要となる値は、表示テキストの「 Hello！ 」の部分で、
表示テキストの内容を取得する場合は、getElementById メソッドを次のように記述して使用する。

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

表示テキストの内容は、getElementById メソッドに textContent プロパティを付けて取得する。
「 document.getElementById("dat").textContent 」を出力すると、次のようになる。

Hello!

　
テキスト内容の「 Hello! 」を取得。

##value プロパティで入力値を取得
『getElementById』メソッドは、Webサイトの画面で入力された値を JavaScript 側で取得する場合に よく使用し、
画面の入力値を取得する際には、getElementById メソッドを次のように記述して使用する。

document.getElementById("id 名").value;

入力値は、getElementById メソッドに value プロパティを付けて取得する。
valueプロパティの値は 文字列となるため、「 document ．getElementById（ "id 名" ） ．value 」の返り値は 全て文字列となる。
　
　##参考サイト
[JavaScript【 getElementById 】 ～ id 名を指定してデータを取得]
(https://programmercollege.jp/column/8278/)