IT用語
HTMLの文書を、JavaScriptから操作できるように木構造で表したもの。要素の追加や変更、イベントの処理に使う。
- 別名・略称
- Document Object Model
DOM（Document Object Model）は、HTML の文書を、プログラム（主に JavaScript）から読み取ったり書き換えたりできるように、要素を木構造（ツリー）で表したものです。ブラウザは HTML を読み込むと DOM を作り、それをもとに画面を表示します。
できること
- 要素を探す：document.querySelector() など（セレクタ を使う）
- 内容や属性、スタイルを変える：textContent、classList など
- 要素を追加・削除する：append()、remove() など
- クリックなどの操作に反応する：addEventListener()（イベントリスナー）
パフォーマンスのポイント
DOM の変更は、画面の再計算や再描画を伴うため、回数が多いと動作が重くなります。変更をまとめて行う、ループの中で何度も要素を探さない、といった工夫が有効です。
セキュリティ上の注意
利用者の入力や URL の値を、innerHTML などで HTML として DOM に書き込むと、XSS（DOM Based XSS）の原因になります。文字列を表示するだけなら textContent を使います。
