DOMとは？非エンジニア向けにわかりやすく解説

3秒でわかる

ブラウザがHTMLを木構造のオブジェクトとして持ち直したもの。JavaScriptから要素を探して書き換え、ページを読み込み直さずに画面を変えるために使います。

30秒図解

DOMはHTMLをhtmlからbodyとtodo-listへつながる木構造にし、JavaScriptがliを追加して画面だけを書き換える — HTMLファイルはそのままでも、JavaScriptは現在のDOMへ要素を追加し、画面の状態を変えられます。

もう少し詳しく

どういうものか

DOM は Document Object Model の略で、ブラウザが読み込んだ HTML を、JavaScript から触れる木構造のオブジェクトとして持ち直したものです。を根として、その下の

や

が枝分かれし、テキストも一つのノードとして木にぶら下がります。重要なのは、DOM は HTML ファイルそのものではないという点です。ファイルは最初の一回だけ読まれ、その後のページの状態は DOM が持ちます。JavaScript で DOM を書き換えると画面が変わり、HTML ファイルは変わりません。

なぜ必要か

DOM が無ければ、表示を変えるたびにサーバーへページを取りに行くしかありません。入力欄のエラー表示、開閉するメニュー、「もっと見る」で増える一覧といった動きは、すべて DOM を書き換えることで実現しています。ブラウザの開発者ツールで Elements タブに映っているのは、HTML ソースではなく現在の DOM です。ソースを見ても無い要素がそこに映っているときは、JavaScript が後から差し込んだと分かります。

具体例

// 要素を探す
const list = document.querySelector("#todo-list");
const input = document.querySelector("#todo-input");

// 要素を作って木にぶら下げる
document.querySelector("#add").addEventListener("click", () => {
  const li = document.createElement("li");
  li.textContent = input.value;
  list.appendChild(li);
  input.value = "";
});

// <a href="/glossary/class" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">クラス</a>の付け外しで見た目を変える
list.addEventListener("click", (e) => {
  if (e.target.tagName === "LI") {
    e.target.<a href="/glossary/classlist-toggle" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">classList.toggle</a>("done");
  }
});

つまずきやすいところ

document.querySelector が null を返してエラーになるのは、ほとんどが読み込み順の問題です。に置いた