HTMLを書き換える

HTMLに書かれた要素をjavascriptで取得する

特定のid属性持つ要素を取得する

.
.
.
<p class= content id="choice">ここに日時を表示します</p>
  <script>
    'use strict';
    console.log(document.getElementById('choice'));
  </script>
.
.
.

コンソール

<p class="content" id="choice">ここに日時を表示します</p>

consoleオブジェクトに対してdocumentオブジェクトのidがchoiceの要素を
表示するように命令している。

.getElementByIdメソッド

（）内に指定されたid名を持つ要素を丸ごと取得します。

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

出典

取得した要素のコンテンツを書き換える

<p class= content id="choice">ここに日時を表示します</p>
  
  <script>
    'use strict';
    document.getElementById('choice').textContent = new Date();
  </script>

documentオブジェクト

Wed Dec 0１ 2022 12:31:39 GMT+0900 (日本標準時)
と表示される。

気づき

documentオブジェクトに対してidがchoiceの要素に対して文字列を取得させようとしているのか。
その要素のtextContentプロパティに対してnew Date()にするように命令しているのか。
多分new Date（）は今の時間を表示させるようにしているはず。

.textContentメソッド

textContentプロパティは、特定のノードに対して、ノード内のテキストを文字列で取得します。

出典

プロパティとは？

オブジェクトに記憶されているもののことを言う。メンバーともいう。
プロパティは名前と値からなっている。
プロパティの名前のことをキーとも言う。
値には任意のデータ型を使えます。

出典

p40

new　演算子

オブジェクトのインスタンス生成をする

出典

p103

Date()

関数として呼び出されると、現在の日付と時刻の文字列表現を返します。すべての引数は無視されます。結果は、 を実行した場合と同じnew Date().toString()です。

出典

出典