ドキュメント オブジェクト モデル (DOM) は、基本的に「Web ページが舞台裏でどのように動作するか」を表す Web 開発用語であり、すべての Web 開発者が知っておくべきものです。彼らのツールキット。これは、現代の Web 開発を強化する秘密のソースのようなものです。

しかし、なぜ DOM なのでしょうか?私は最近、ブラウザがどのように動作するかを説明するビデオを見つけて、いくつかの記事について詳しく調べました。これが、「なぜ?」

すべてのブラウザは ** ブラウザ エンジン ** で動作します。これは、HTML、CSS、JavaScript などの Web コンテンツを、ユーザーが操作できる視覚的な表現にレンダリングする役割を担う Web ブラウザのコア コンポーネントです。

「ドキュメント」: この用語は、Web ブラウザに読み込まれる Web ページを指します。これは、見出し、段落、画像、リンク、フォームなどの要素を含む、Web ページのコンテンツの構造化された階層を表します。 DOM ドキュメントは基本的に、Web ページの構造をメモリ内で表現したもので、ページが読み込まれるときにブラウザのレンダリング エンジンによって作成されます。

ここで、ブラウザ エンジンがドキュメントをノード ツリーに変換する方法の興味深い部分を説明します。ノード ツリーは、ペイント用の DOM として知られています。

ドキュメントをダウンロードした後、生のデータ、はい、0 と 1 に変換されます。そして、この生のデータのバイトは文字に変換されます。この変換は、HTML ファイルの文字エンコーディングに基づいて行われます。

これらの文字は、トークンと呼ばれるものにさらに解析されます。他のプログラミング言語のトークンと同様に、そのプログラミング言語の意味のある最小の個々の要素として定義できます。ここでのトークンとは、HTML 内のタグ、つまり body、h1、h2、 p、スパンなど

トークン化が完了したら、次のステップはこれらのトークンを構造化することです。 ここでオブジェクトが登場します。これらのトークンからオブジェクトが作成されます。これらのオブジェクトには、タグの開始、タグの終了、属性、データ/値など、各エンティティに関する多くの情報が含まれています。

これで、「ドキュメント」と「オブジェクト」 ができましたが、これらのオブジェクト間には関係がないため、まだ構造化されていません。トークン化後、これらのトークンはノードに変換されます。各ノードは、親ノード、子ノード、兄弟ノードを特徴とする別のノードとの関係を持ちます。これらのノード間の関係は、よく知られたツリー状の構造を形成します。このプロセスはオブジェクト ツリーのモデリングとして知られています。これで、HTML ドキュメントからノード ツリー モデルが準備され、ペイントする準備が整いました。

要約すると、「ドキュメント オブジェクト モデル」 という名前はその目的と機能を反映しています。これは、オブジェクトのコレクションとして表される、Web ページ コンテンツの構造化モデルとして機能します。 「DOM」という名前は、「ドキュメント」（Web ページ）、「オブジェクト」（要素を表現）、「モデル」（構造化表現）の融合から生まれました。

これがお役に立てば幸いです。フィードバックをお寄せいただくか、具体的なご質問や懸念事項がございましたらお気軽にお問い合わせください。