JS勉強記⑤DOMとは／idをキーに要素を取得

2021年3月2日 22:25

DOMとは

DOM（Document Object Model）とは「JSで記述されたプログラムからHTML/XMLにアクセスしてWebページを動的に操作する」方法。DOMツリーとはHTML/XMLをツリー構造で表現したもの。<body>タグの下に<h>タグがある、という形を指す。この時の各オブジェクト（<body>、<h>等）のことをノードと言う。

「ブラウザオブジェクト」という階層構造の中の「Documentオブジェクト」がイコールDOMを指す。（ブラウザ内でHTML/XMLで記述されている部分）

「ブラウザオブジェクト」は「Windowオブジェクト」を筆頭に様々なオブジェクトを含んでいる。（履歴やブラウザの進退操作を担当する「History」、ブラウザ名やバージョン等のブラウザ固有情報を提供する「Navigater」等）

IDをキーに要素を取得

getElementByIdメソッドを利用し、HTMLで指定したidをもとにその要素を取り出す。基本構文は以下の通り。

document.ElementById(id：取得したい要素のid値)

※指定したidがHTML内になければnullを返す

※HTML内でidは重複しないこと

例題

現在のid:resultの内容（テキスト）をコンソールに表示。id:resultの内容（テキスト）を、現在時刻（日時）に書き換え。

元のHTMLの<body>要素は↓の通り。

 <body>
   <p id="result">pタグの文字列です。</p>
   <input type="button" value="取得" onclick="show()">
   <script src="js/element_id.js" charset="utf-8"></script>
 </body>

「タグの下に作成した『取得』ボタンを押すと、コンソールにタグの要素が表示され、その代わりにHTMLのタグの要素が現在時間に書き換わる」のが完成動作。

ここではタグのidは"result"で設定済み。<input>タグのonclickは「ボタンをクリックされたときの動作」を指定する。今回は後程設定するshow関数が動作するように指定。

JSの内容は↓の通り。

function show() {
 const result = document.getElementById('result');
 console.log(result.innerText);
 const nowDate = new Date();
 result.innerText = nowDate.toLocaleString();
}

①function命令でshow関数を定義。

②resultを宣言し、getElementByIdメソッドで要素を呼び出すIDを'result'に指定。

③id:resultの内容をコンソールに出力するため、「result.innerText」を呼び出し。すると.innerTextプロパティの影響でタグの文字列「pタグの文字列です。」のみコンソールに出力される。

④nowDateを宣言し「new Date()」で現在時刻を取得。

⑤③で使用した「result.inneText」を現在時刻に書き換えるので　「= nowDate.toLocaleString()」と記述。.toLocaleStringプロパティではオブジェクトの言語に対応した表記（ここでいえば日本語）に変換する。

⑥完成動作の通り動けばOK。

正直例題いきなり出されても解けないな…constで正常に動作したので良しとしよう。

この記事が気に入ったらサポートをしてみませんか？