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

ブラウザがHTMLファイルを読み込んだ瞬間に、HTMLのタグ構造をもとにDOMツリーが構築される。html タグが根っこで、head と body が枝分かれして、さらにその中の要素が葉っぱになる木構造をイメージするとわかりやすい。

基本的には直接触らない。ReactやVueは仮想DOMを使って効率的にDOMを更新してくれる。でもDOMの仕組みを理解していないとデバッグで困るし、ライブラリなしの素のJavaScript（Vanilla JS）を理解するにも必須の知識。

DOMの変更があるとブラウザは「レイアウト計算→描画」をやり直す。1000個の要素を1個ずつ変更すると1000回やり直しになる。だからReactのような仮想DOMは変更をまとめて最小限のDOM操作で済ませる工夫をしている。

MutationObserverというAPIがあるよ。特定の要素の子要素が追加・削除されたり属性が変わったりしたときにコールバックを呼んでくれる。SPAで動的にコンテンツが変わるページの監視や、Chrome拡張機能の開発でよく使われるんだ。

本当だよ。DevToolsのElementsパネルでDOMツリーをリアルタイムに確認・編集できる。実はConsoleから document.querySelector('.header').style.color = 'red' と打てばヘッダーの色が即座に変わる。デバッグだけでなく、他サイトのレイアウトを研究するときにも便利なんだ。