DOM（Document Object Model）は、HTML を プログラムから操作できるように、部品（要素）の木構造として表したもの です。ブラウザ がページを読み込むと、HTMLを解析してこのDOMを組み立てます。
このように、要素が親子関係でつながった「ページの地図」になっています。JavaScript はこの地図をたどって、次のような操作をします。
- 要素を探す（「idがtitleの要素」など）
- 文字や属性を書き換える
- 新しい要素を追加する、消す
- クリックなどの出来事（イベント）に反応する
ページの「動き」は、つきつめれば JavaScriptによるDOMの書き換え です。ユーザーの操作に応じてDOMを変えると、画面の表示がその場で更新されます。フロントエンドの根っこにある、とても重要な仕組みです。