はじめに

本来技術記事に自己紹介なんていらんやろうけど、、、
この記事は絶賛就活中のわたくしももみんが勉強したいことをただただ深掘りしただけの記事です。
間違いがあれば教えていただきたいです💨

Document Object Model

Document（文書）: 操作対象 = 「文書」。Webページも、XMLファイルも、SVGも、すべて「文書」として扱われる。

Object（オブジェクト）: 文書の各部分（要素、属性、テキスト）。オブジェクトにはプロパティとメソッドがある。

Model（モデル）: 文書のデータ構造。

DOMとは

ドム / DOM / Document Object Model

MDNより
文書の構造をメモリー内に表現することで、ウェブページとスクリプトやプログラミング言語を接続するもの

「DOM」 とは、「文書」 という概念をプログラムから扱えるようにするための抽象化(モデル化？)。

「文書」とは何か

DOMを理解するために、まず 「文書（Document）」 とは何かを考える。
以下は辞書で調べた結果。

【文書】
文字によって、人の意思を書き記したもの。書きもの。もんじょ。

シンプルに紙の文書で考える。タイトルがあり、段落があり、見出しがあり、リストがある。この構造は、言葉の意味合いで考えると読み手に意味を伝えるために存在する。

電子化の時代になっても、この「構造を持った文書」という概念は変わらない。
変わったこと = その文書を「プログラムから操作したい」という要求が生まれたこと。

なぜ「モデル」が必要なのか

人間が文書を読むとき、「これは見出しだ」「これは本文だ」「これはリストの項目だ」と無意識に構造を理解している。

でも、コンピュータにとって文書は単なるバイト列に過ぎないので、コンピュータが文書の構造を理解し、操作するためには、文書をコンピュータが理解できる形式で表現する必要がある。これがここでの「モデル」の役割。

DOMは、文書を 「オブジェクトの木構造」 として表現する。

よく見る図

Document
└─ html
   ├─ head
   │  └─ title
   │     └─ "ページタイトル"
   └─ body
      ├─ h1
      │  └─ "見出し"
      └─ p
         └─ "本文"

なぜ「木構造」なのか

文書の構造を表現する方法は複数考えられる。（と思う）なぜDOMは木構造なのか。

文書の構造には階層性がある。章の中に節があり、節の中に段落があり、段落の中に文がある。この関係は、木構造で自然に表現できる。と記事に書いてあった。

木構造の利点をCloudeに聞いた...私の反応

・ 親子関係が明確で、要素間の関係を辿りやすい ... 確かに！！明確！
・ 部分木を切り出して操作できる ... 逆に直接繋がってない部分がだるそう
・ 再帰的な処理と相性が良い ... いつの間にか恩恵受けてる

DOMとHTML

HTML = 文書の記述形式
DOM = その文書をプログラムから操作するためのインターフェース

HTML

<p class="intro">Hello, <strong>World</strong>!</p>

DOMツリー

p (class="intro")
├─ "Hello, "
├─ strong
│  └─ "World"
└─ "!"

HTMLの文字列とDOMツリーは1対1で対応しない。同じDOMツリーを生成するHTMLは複数存在する。

DOMは静的ではない

HTMLファイル = 静的なテキスト。ファイルを編集しない限り変わらない。
DOM = メモリ上に存在するデータ構造。プログラムからいつでも変更できる。

DOMは動的に変更できる

const p = document.createElement('p');
p.textContent = 'New paragraph';
document.body.appendChild(p);

DOMとレンダリング

『『DOMは画面表示とは独立した概念』』

DOMツリーに要素を追加しても、それが即座に画面に表示されるわけではない。ブラウザは別のプロセス（レンダリングパイプライン）で、DOMツリーを元に画面を生成する。

// DOMツリーには存在するが、まだ画面には表示されない
const div = document.createElement('div');
div.textContent = 'Hello';

// documentに追加して初めてレンダリング対象になる
document.body.appendChild(div);

まとめ

DOMとは、ロマンの塊である。

参考文献

DOM Standard - WHATWG
Document Object Model (DOM) Level 1 Specification - W3C
MDN Web Docs - Introduction to the DOM - Mozilla
何を読んだかもわからないくらいの大量の記事