DOM

📖 もうちょい詳しく

何が新しいの？

WebページのもとになるHTMLは、もともとはただの文字のかたまりです。これをブラウザが読み込むときに、見出しや段落などの部品ごとに分けて、扱いやすい形に作り直します。この「作り直したあとの形」がDOMです。DOMがあることで、ページを表示したあとからでも中身を書きかえられるようになりました。

どうやって動いてるの？

ブラウザはHTMLを上から読んで、タグの入れ子のかたちを木（ツリー）の構造に組み立てます。木の幹から枝が分かれていくように、ページ全体を頂点にして、その下に見出しや段落、画像などの「節（ふし）」がぶら下がります。この一つひとつの節を「ノード」とよびます。JavaScript（ジャバスクリプト。ブラウザの中で動くプログラミング言語）からこの木をたどって、特定の節を探したり、文字を入れかえたりできます。

何ができるの？

ボタンを押したら文字が変わる、入力に応じて表示が増える、といった「動くページ」はDOMを書きかえることで作られています。たとえば買い物カゴの数が即座に増えるのも、裏でDOMの一部分だけを差しかえているからです。ページ全体を読み込み直さずに、必要な場所だけ更新できます。

🌱 身近なたとえ

紙に書いた手紙で例えると、HTMLは「便箋に書かれた文章そのもの」です。それに対してDOMは、その文章を「タイトルの箱」「本文の箱」「署名の箱」と整理して棚に並べ直したものに近いです。棚に分かれているので、「本文の箱だけ中身を入れかえる」といったことが、あとからでも手軽にできます。

✅ まず覚えるポイント

• DOMは「ブラウザがHTMLを読み込んで作る、操作しやすい形」のこと
• 全体は木（ツリー）の構造で、部品の一つひとつを「ノード」とよぶ
• JavaScriptからノードを探したり書きかえたりできる
• ページを読み込み直さずに、一部分だけ更新できる
• HTMLそのものではなく、HTMLをもとにブラウザが組み立てた結果

🧭 よくある勘違い

DOMとHTMLは同じもの？

近い関係ですが、別のものです。HTMLはファイルに書かれた文字で、いわば設計図です。DOMはその設計図をブラウザが読み込んで、メモリの中に組み立てた立体的な部品のあつまりです。表示後にJavaScriptでDOMを書きかえても、もとのHTMLファイルの文字は変わらないことが多いです。

DOMはJavaScript専用の機能なの？

いいえ。DOMはブラウザが用意している共通の仕組みで、JavaScriptはそれを操作するための代表的な手段にすぎません。考え方としては言語に依存しない設計になっていて、JavaScriptはそこへつなぐ窓口の役割を担っています。

ノードが増えるとどうなるの？

DOMの節（ノード）が多すぎたり、書きかえる回数が多すぎたりすると、ブラウザの処理が重くなって表示がもたつくことがあります。そのため、まとめて更新する、必要な分だけ書きかえる、といった工夫がよく行われます。

🧩 関連して覚えると楽な言葉

• HTML: Webページの中身と構造を書くための言語。DOMのもとになる設計図にあたります
• JavaScript: ブラウザの中で動くプログラミング言語。DOMを操作する代表的な手段です
• CSS: 見た目（色やレイアウト）を指定する仕組み。DOMの部品に対して見栄えを与えます
• 木構造（ツリー構造）: 枝分かれで親子関係を表す形。DOMはこの形でページを表します

🏁 ひとことでまとめ

DOMは、ブラウザがHTMLを木のかたちに組み立て直したもので、ここを書きかえることでページがあとから動いて見えるようになります。