はじめに
JavaScriptを学ぶときにフロントエンドなら必須の「DOM」について解説します。
DOMとは
正式名称はDocument Object Model(ドキュメントオブジェクトモデル)。HTMLで作成した文書をプログラムがツリー状の構造データにしてまとめたもの。
これはHTMLを実行してWebページに表示する際、作成されます。
DOMを操作する
作成されたDOMは、JavaScriptを使ってアクセスできます。そして動的な処理を追加し、Webページ動きをつけることが可能です。
JavaScriptのDocumentインターフェースメソッドを使います。
例えばここにTODOリストを表示できるHTML文書があります。
<!DOCTYPE html>
<html>
<head>
<title>TODO(JS)</title>
<meta charset="UTF-8" />
</head>
<body>
<div class="input-area">
<input id="add-text" placeholder="TODOを入力" />
<button id="add-button">追加</button>
</div>
<div class="incomplete-area">
<p class="title">未完了のTODO</p>
<ul id="incomplete-list"></ul>
</div>
<div class="complete-area">
<p class="title">完了のTODO</p>
<ul id="complete-list"></ul>
</div>
<script src="./index.mjs" type="module"></script>
</body>
</html>
JS(JavaScript)ファイルの方でTODOの内容を記載するTextに対して処理を追加したいとき、「document.getElementById()」メソッドというものがあります。
これは上記のHTML文書のタグの後に記述されている「id」の要素を取得して、そのタグで生成させたコントロールに対して処理を書くことが出来ます。
下記は、"add-text"というテキストが記載できるinputタグ要素のidにアクセスし、初期状態はテキストの中身を空文字で表示する処理が書かれています。
const inputText = document.getElementById("add-text").value;
document.getElementById("add-text").value = "";
アクセスする為のメソッドはidの他にもあったり、DOMの要素を追加、変更したりといったメソッドも多数存在します。自分は何を実装したいのか考えて、適切なものを選択してコーディングしていきます。
おわりに
今までJavaScriptと言われたら、Webページに動きをつけることが得意な言語くらいの認識でしたが、何故なのかが分かりませんでした。DOMという仕組みを利用していることを理解できた時、本質がつかめてすごくスッキリしました。
参考