DOM（ドキュメントオブジェクトモデル） とは？

HTMLやXMLの文書を、ノードとオブジェクトからなるツリーとして表すモデルとAPI。ブラウザではJavaScriptなどからページの内容・構造・スタイルを読み書きし、イベントを扱うために使う。JavaScript言語そのものの機能ではなくWeb API。

ひよこ

DOMっていつ作られるの？

ペンギン先生

ブラウザがHTMLを解析しながら作るよ。文書を表すdocumentの下にhtml要素があり、その下にheadやbodyなどがある。タグに対応する要素だけでなく、文字を表すテキストノードなどもある木構造だよ。

ひよこ

Reactを使うときもDOMを直接触るの？

ペンギン先生

Reactは表示結果に合わせてDOMを更新するので、普段は状態やpropsから表示を作るよ。フォーカスやスクロールなどでDOMへアクセスすることもある。ただしReactが管理する子要素を勝手に追加・削除すると、不整合が起こることがあるんだ。

ひよこ

DOM操作が重いってどういうこと？

ペンギン先生

サイズや位置の変更はレイアウト計算につながるけど、すべての変更で即座に全部を描き直すわけではないよ。変更1000回なら描画も1000回、とは言えない。サイズを変えた直後に寸法を読み取る処理を繰り返すと、強制的なレイアウト計算が増えることがあるんだ。

ひよこ

DOMの変更を監視する方法はあるの？

ペンギン先生

MutationObserverで、指定したノードの子要素や属性などの変更を監視できるよ。observe()で対象と監視内容を指定すると、該当する変更をコールバックで受け取れる。画面の見た目が変わる原因を何でも検知するものではないから、DOMの変更として考えよう。

ひよこ

開発者ツールに見えるのは元のHTMLなの？

ペンギン先生

Chrome DevToolsのElementsパネルでは、現在のDOMを確認・編集できるよ。JavaScriptが追加した要素など、取得時のHTMLと違う場合もある。querySelector()は条件に合う最初の要素を返し、見つからなければnull。取得できた要素の内容やスタイルを調べられるんだ。

まとめ：ざっくりこれだけ覚えればOK！

「DOM」って出てきたら「文書をツリーで表し、プログラムから操作できる仕組み」と思えばだいたいOK！

誤り・わかりにくい説明を報告する