1. はじめに
本記事では、JavaScript DOM操作の
「IDをキーに要素を取得」
について記載する。
2.getElementById
役割
任意のHTMLタグで指定したIDにマッチするドキュメント要素を取得するメソッドのこと。
※メソッド:あるオブジェクトに」結び付けられた関数のこと。
役割の詳細
引数としてIDであるStringオブジェクトを要し、戻り値は取得した要素
任意の要素を抽出し、その内容を変更したい場合など、様々なシチュエーションで活躍する関数
注意点
HTML上で指定するidは、ページ内で重複しないようにすること。
基本は、最初に合致した要素を返すが、ブラウザの種類やバージョンにより挙動が異なる可能性がある。
3. どうやって書くの？
構文
構文は以下のようになる。
let 変数名 = document.getElementById(id名);
※()内のidは、所得したいid値である。
補足
指定したidを持つ要素がなければ、nullを返す。
※null:オブジェクトが存在しないことを表す。
4. 例題
内容
現在のid:resultの内容をコンソールに表示する。
id:resultの内容を、現在時刻に書き換える。
実践前のチュートリアル
実践に入る前に、完成形を先に表示しておく。
仕組みとしては、以下のようになっている。
<p>タグで囲って文字列としてブラウザに表示されている。
「取得」と表示されているボタンをクリックすると、 1で表示されていた文字列が変化し、現在時刻をブラウザへ表示する。 その際、最初にブラウザに表示されていた文字列がコンソールに出力される。
実践
マークアップ
ブラウザに文字列を表示しないといけないので、HTMLの作成から取り掛かる。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p id="result">pタグの文字列</p>
<input type="button" value="取得" onclick="show()" />
<script src="js/index.js"></script>
</body>
</html>
復習になるが、ボタン部分の属性についておさらいしておく。
type="button"
プッシュボタンで既定の動作を持たない。
value="取得"
初期値のこと。
フォームコントロールの現在の値。
名前/値の組の部分としてフォームと一緒に送信される。
onclick="show()"
元々はJavaScriptで使用されるもの。意味としては、 ボタンがクリックした際に関数を呼び出すというもの。
※show()は、「クリックされたら要素を表示する」を意味する。
実際にマークアップしたものをブラウザに表示すると、
狙い通りに表示することが出来た。
JavaScriptの記述
次にJavaScriptを仕上げていく。
クリックされた際のイベント作成
まずは取得ボタンをクリックした際のイベントを作成していきたいので、
show関数を書いていく。
index.js
function show() {
let result = document.getElementById('result');
console.log(result.innerText);
}
この構文を説明すると、以下のようになる。
let result = document.getElementById('result');
function関数内の変数resultを、HTMLのpタグのidと紐付ける。
console.log(result.innerText);
コンソールに出力する際にpタグ内の文字列を表示したい際は、 result.innerTextとすることでpタグ内の文字列を出力できるようになる。
文字列を現在時刻に書き換えるように動的に処理
次に、pタグ内の文字列を現在時刻へ動的に変換する記述を行う。
※上記で記載したものに続きを記載
index.js
function show() {
let result = document.getElementById('result');
console.log(result.innerText);
let nowDate = new Date();
result.innerText = nowDate.toLocaleString();
}
以下解説。
let nowDate = new Date();
変数nowDateを定義する。
new Date();とすることで、現時刻を取得することができる。
result.innerText = nowDate.toLocaleString();
result.innerText(pタグ内の文字列)を、取得した現時刻と紐付けている。
toLocaleString();は、 地域に応じた文字列表現=日本で使う日時表現 ということ。
ブラウザでの検証
実際にブラウザにて挙動を確認していく。
検証の結果、
ボタンをクリックした際に、pタグ内のコンソールを出力することが出来た。
ブラウザに表示されていた文字列が、クリック時の現在日時に入れ替わった。