DOM

DOM（Document Object Model）は、HTML を プログラムから操作できるように、部品（要素）の木構造として表したもの です。ブラウザ がページを読み込むと、HTMLを解析してこのDOMを組み立てます。

flowchart TD
  DOC[document] --> HTML[html]
  HTML --> HEAD[head]
  HTML --> BODY[body]
  BODY --> H1[h1]
  BODY --> P[p]

このように、要素が親子関係でつながった「ページの地図」になっています。JavaScript はこの地図をたどって、次のような操作をします。

• 要素を探す（「idがtitleの要素」など）
• 文字や属性を書き換える
• 新しい要素を追加する、消す
• クリックなどの出来事（イベント）に反応する

ページの「動き」は、つきつめれば JavaScriptによるDOMの書き換え です。ユーザーの操作に応じてDOMを変えると、画面の表示がその場で更新されます。フロントエンドの根っこにある、とても重要な仕組みです。