In 'n' Out | DOM構造

DOMとは

ブラウザはHTMLを読み込むと、内部でDOMツリーと呼ばれる構造を作り、ページ全体を階層的に整理します。これにより、CSSやJavaScriptが要素を正確に操作できるようになります。 DOM（Document Object Model）は、HTMLタグを親子関係で整理した木構造として理解し、各要素をツリー上に配置します。 HTMLはhead要素（設定情報）とbody要素（表示領域）に分かれており、それぞれ異なる役割を持っています。 head要素にはページのタイトルや文字コードなどの設定情報を記述し、実際のページには表示されない一方、body要素には見出しや本文など、ユーザーに見えるコンテンツを記述します。

コード例

<!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>サンプルページ</title>
    </head>
    <body>
        <h1>タイトル</h1>
        <p>本文テキスト</p>
    </body>
</html>

このHTMLは、ブラウザの内部で図のような階層構造として扱われます。

HTML構造を示す図。html要素の中にhead要素とbody要素があり、headにはmetaとtitle、bodyにはh1とpが含まれる。

この階層構造があることで、CSSやJavaScriptが「どの部分に対して操作を行うか」を明確に指定できるのです。

まとめ

ブラウザはHTMLを読み込み、DOMツリーとして構造化します。 head要素はページの設定情報を、body要素は実際の表示内容を担当します。 DOM構造を理解することで、CSSやJavaScriptの操作対象を正確に指定できるのです。