エンジニアの将来って?

現在7年目のCOBOL→Java→C#エンジニアが、将来への考えや勉強のアウトプット、たまに腎臓について書くブログです

【JavaScript】指定したidの要素を取得するgetElementByIdメソッドについて解説します。

こんにちは。たいら(@tairaengineer2)です。

この記事では指定したidの要素を取得するgetElementByIdメソッドについて解説します。

スポンサーリンク

 

getElementByIdメソッドとは

本当にメソッド名の通りで、指定されたid要素取得するメソッドです。

Document の getElementById() メソッドは、 id プロパティが指定された文字列に一致する要素を表す Element オブジェクトを返します。
要素の ID は指定されていれば固有であることが求められているため、特定の要素にすばやくアクセスするには便利な方法です。

構文
var element = document.getElementById(id);

Document.getElementById() - Web API | MDNから引用させて頂きました

では、実際に使ってみます。

解説で使うサンプルプログラムの内容

HTMLとJavaScriptを1つずつ作ります。
HTMLにpタグとdivタグを作ります。
それぞれのタグを取得して、それぞれの要素にテキストを設定していきます。

フォルダ構成

フォルダ構成は↓の画像のようになっています。

f:id:Tairax:20190928113047p:plain

GetElementByIdSample.html 表示するHTML
GetElementByIdSample.js 要素を取得してテキストを設定するJavaScript

HTMLサンプルコード

<!DOCTYPE html>
<html>
	<head>
		<title>GetElementByIdサンプル</title>
	</head>
	<body>
		<p id="pElement"></p>
		<div id="divElement"></div>
		<script src="../js/GetElementByIdSample.js"></script>
	</body>
</html>

今回JavaScriptを読みこむパスは、相対パスで指定しています。
相対パスについては、この記事をご参考ください。<(_ _)>

www.tairax.com

JavaScriptサンプルコード

// pタグ
var pElement = document.getElementById('pElement');
pElement.innerHTML = 'pタグにテキストを設定';

// divタグ
var divElement = document.getElementById('divElement');
divElement.innerHTML = 'divタグにテキストを設定';

実行結果

f:id:Tairax:20190928114105p:plain

ちゃんとpタグとdivタグにテキストが設定されていますね!

解説

↑のJavaScriptサンプルコードで1点ポイントがあるので解説します。
それは、JavaScriptを読み込む位置は、必ず取得する要素よりに設定することです。

HTMLは上から下へ読み込んでいきます。

f:id:Tairax:20190928172208p:plain

JavaScriptサンプルコードのように読み込んだ時点で処理を実施するJavaScriptは、読み込んだ時点で処理の対象となる要素がすでにないと何も処理をすることができません。
実際に見ていきます。

JavaScriptを読み込み位置を以下のように変更します。

<!DOCTYPE html>
<html>
	<head>
		<title>GetElementByIdサンプル</title>
	</head>
	<body>
		<script src="../js/GetElementByIdSample.js"></script>
		<p id="pElement"></p>
		<div id="divElement"></div>
	</body>
</html>

変更した部分はJavaScriptを読み込む位置だけです。
では、実行結果を見てみます。

f:id:Tairax:20190928173808p:plain

マジで何も表示されません(;'∀')
開いているブラウザがGoogleCromeの場合、F12ボタンを押すと開発者ツールを開くことができます。
開発者ツールを開いてみると

f:id:Tairax:20190928174149p:plain

こんな風に要素を取得できなかったため、エラーになってます。

読み込んだ時点でHTMLに表示制御を行うJavaScriptの読み込む位置には気を付けましょう!

まとめ:getElementByIdメソッドを使ってみよう

以上がgetElementByIdメソッドの解説です。
getElementByIdメソッドは、要素を取得するときにとても便利なメソッドです。
ぜひ、使ってみてください!

あなたのご参考になったのなら、とても嬉しいです(*´▽`*)
ではでは~(・ω・)ノシ

 

ほかにもJavaScript記事を書いてます。
よければご参考ください。

【JavaScript】巻き上げ、ホイストをできるだけ分かりやすく解説します

【JavaScript】matchメソッドを使って、正規表現で文字列判定するやり方を解説します