##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の内容を、現在時刻に書き換える。 :::

###実践前のチュートリアル実践に入る前に、完成形を先に表示しておく。 ![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662822/c8c0f773-ced9-7a59-cb93-77ad58faa68c.gif) 仕組みとしては、以下のようになっている。

<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>

復習になるが、ボタン部分の属性についておさらいしておく。 #####type="button" :::note warn プッシュボタンで既定の動作を持たない。 ::: #####value="取得" :::note warn 初期値のこと。 ::: :::note warn フォームコントロールの現在の値。 ::: :::note warn 名前/値の組の部分としてフォームと一緒に送信される。 ::: #####onclick="show()" :::note warn 元々はJavaScriptで使用されるもの。意味としては、 ボタンがクリックした際に関数を呼び出すというもの。 ::: ※show()は、「クリックされたら要素を表示する」を意味する。

実際にマークアップしたものをブラウザに表示すると、

狙い通りに表示することが出来た。

####JavaScriptの記述次にJavaScriptを仕上げていく。

#####クリックされた際のイベント作成
まずは取得ボタンをクリックした際のイベントを作成していきたいので、
show関数を書いていく。

index.js

index.js

function show() {
  let result = document.getElementById('result');
  console.log(result.innerText);
}

この構文を説明すると、以下のようになる。 #####let result = document.getElementById('result'); :::note warn function関数内の変数resultを、HTMLのpタグのidと紐付ける。 ::: #####console.log(result.innerText); :::note warn コンソールに出力する際にpタグ内の文字列を表示したい際は、 result.innerTextとすることでpタグ内の文字列を出力できるようになる。 :::

####文字列を現在時刻に書き換えるように動的に処理次に、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();
}

以下解説。 #####let nowDate = new Date(); :::note warn 変数nowDateを定義する。 ::: :::note warn new Date();とすることで、現時刻を取得することができる。 ::: #####result.innerText = nowDate.toLocaleString(); :::note warn result.innerText(pタグ内の文字列)を、取得した現時刻と紐付けている。 ::: :::note warn toLocaleString();は、 地域に応じた文字列表現=日本で使う日時表現 ということ。 :::

####ブラウザでの検証実際にブラウザにて挙動を確認していく。

検証の結果、

ボタンをクリックした際に、pタグ内のコンソールを出力することが出来た。

ブラウザに表示されていた文字列が、クリック時の現在日時に入れ替わった。

##5. おわりに
次項:JavaScript DOM操作③ 「タグ名をキーに要素を取得」に続く。