DOMツリー

DOMツリーを分かりやすく

Jamstack に携わっていると、DOMツリーという言葉をよく耳にします。

DOMツリーは、WebページのHTML要素をツリー構造で表現したものです。DOM（Document Object Model）は、HTMLやXML文書のプログラムやスクリプトからの動的なアクセスや更新を可能にするためのプラットフォームと言語に独立したインターフェースです。

DOMツリーを理解するための例え話として、公園の木を思い浮かべてみてください。公園の木は、大きな幹（HTMLドキュメント）からいくつもの枝（HTML要素）が分岐し、それぞれの枝には葉（テキストや属性）がついています。このように、DOMツリーも一つの親要素からいくつもの子要素が分岐しています。

DOMツリーの歴史的変遷

DOMツリーは、ウェブが成長し進化する過程で開発されました。初期のウェブでは、HTMLが静的なページを提供するために使用され、ユーザーが直接ページを更新することはできませんでした。しかし、ウェブが進化し、より対話的な体験が求められるようになると、ページの動的な更新が必要となりました。

1998年にDOM Level 1が発表され、初めてHTMLとXML文書の構造と内容を操作するためのインターフェースが定義されました。その後、DOM Level 2とLevel 3が追加され、より強力な機能が追加されました。現在では、DOM Level 4やHTML Living StandardとしてDOMは常に更新され、ウェブアプリケーションの発展を支えています。

DOMツリーとJamstackの関係

JamstackとDOMツリーは密接な関係にあります。Jamstackでは、JavaScriptを用いてクライアントサイドでDOMツリーを操作し、動的なウェブ体験を提供します。また、Jamstackでは静的サイトジェネレータがHTMLページを生成しますが、これらのページもDOMツリーとして表現され、JavaScriptによって動的に操作されます。

What is the Document Object Model?によると、次のように書かれています。

DOMとは、HTMLやXMLドキュメントのためのプログラミングAPIであり、ドキュメントの論理的構造を定義し、ドキュメントへのアクセスや操作の方法を規定しています。これにより、プログラマーはドキュメントを作成・構築し、その構造をナビゲートし、要素やコンテンツを追加・修正・削除することができます。DOMはどのプログラミング言語とも使用することができます​​。

具体的には、DOMはドキュメントのオブジェクトモデルであり、そのモデルはそれがモデル化するドキュメントの構造に密接に似ています。これにより、DOMはドキュメントの論理的なツリー構造を表現しますが、どのようにオブジェクト間の関係が実装されるかは指定していません。DOMはDOM CoreとDOM HTMLの2つの部分から構成されています。DOM CoreはXMLドキュメントに使用される機能を表現し、DOM HTMLの基礎ともなります。

DOMツリーを学ぶ

以下は、DOMツリーを学ぶ上で役立つリソースのリンクです。

タイトル	説明
MDN Web Docs: DOM	DOMについての詳細な情報を提供するMDNの公式ドキュメントです。
W3C: Document Object Model (DOM)	DOMの標準を定めるW3Cの公式ページです。
JavaScript.info: Document	JavaScriptからDOMを操作する具体的な方法を解説しています。