##1. はじめに
本記事では、JavaScript DOM操作の
「IDをキーに要素を取得」
について記載する。
##2.getElementById
###役割
:::note
任意のHTMLタグで指定したIDにマッチするドキュメント要素を取得するメソッドのこと。
:::
※メソッド:あるオブジェクトに」結び付けられた関数のこと。
###役割の詳細 :::note 引数としてIDであるStringオブジェクトを要し、戻り値は取得した要素 ::: :::note 任意の要素を抽出し、その内容を変更したい場合など、様々なシチュエーションで活躍する関数 ::: ###注意点 :::note alert HTML上で指定するidは、ページ内で重複しないようにすること。 ::: :::note alert 基本は、最初に合致した要素を返すが、ブラウザの種類やバージョンにより挙動が異なる可能性がある。 ::: ##3. どうやって書くの？ ###構文 構文は以下のようになる。
index.js
let 変数名 = document.getElementById(id名);
※()内のidは、所得したいid値である。
###補足 :::note alert 指定したidを持つ要素がなければ、nullを返す。 ::: ※null:オブジェクトが存在しないことを表す。 ##4. 例題 ###内容 :::note warn 現在のid:resultの内容をコンソールに表示する。 ::: :::note warn id:resultの内容を、現在時刻に書き換える。 :::
###実践前のチュートリアル 実践に入る前に、完成形を先に表示しておく。  仕組みとしては、以下のようになっている。
<p>タグで囲って文字列としてブラウザに表示されている。
「取得」と表示されているボタンをクリックすると、
1で表示されていた文字列が変化し、現在時刻をブラウザへ表示する。
その際、最初にブラウザに表示されていた文字列がコンソールに出力される。
###実践 ####マークアップ ブラウザに文字列を表示しないといけないので、HTMLの作成から取り掛かる。
index.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>
実際にマークアップしたものをブラウザに表示すると、
狙い通りに表示することが出来た。
####JavaScriptの記述 次にJavaScriptを仕上げていく。
#####クリックされた際のイベント作成
まずは取得ボタンをクリックした際のイベントを作成していきたいので、
show関数を書いていく。
index.js
index.js
function show() {
let result = document.getElementById('result');
console.log(result.innerText);
}
####文字列を現在時刻に書き換えるように動的に処理 次に、pタグ内の文字列を現在時刻へ動的に変換する記述を行う。 ※[上記で記載したもの](https://qiita.com/Stack_up_Rising/items/238661a082eb3ce8979c#%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%81%95%E3%82%8C%E3%81%9F%E9%9A%9B%E3%81%AE%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E4%BD%9C%E6%88%90)に続きを記載
index.js
index.js
function show() {
let result = document.getElementById('result');
console.log(result.innerText);
let nowDate = new Date();
result.innerText = nowDate.toLocaleString();
}
####ブラウザでの検証 実際にブラウザにて挙動を確認していく。
検証の結果、
ボタンをクリックした際に、pタグ内のコンソールを出力することが出来た。
ブラウザに表示されていた文字列が、クリック時の現在日時に入れ替わった。
##5. おわりに
次項:JavaScript DOM操作③ 「タグ名をキーに要素を取得」に続く。