HTMLDOMとは何か

2026-1-8

Vue を勉強している中でそもそも DOM って何だっけという話からわからなくなったので MND のドキュメントを読んでまとめてみた記録。公式ドキュメントを読めばわかる内容ですが、ご愛敬。

Document Object Model (DOM) - Web APIs | MDN

DOM とは何か

React で仮想 DOM だとかでてきてそんなものがあるんだなーと思っていましたが一体 DOM って何なのか。DOM の定義は公式サイトには以下のように記述されている。

The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory. ... The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree. With them, you can change the document's structure, style, or content.

大雑把にいうと、web page とプログラム言語をつなぐもの。DOM は memory 内に展開されて、それを通じて構造やスタイルや中身をいじることが出来る。とのこと。 DOM は Tree 構造で管理されていて、HTML の構造を表している。

DOM がどう操作をつなぐか

MND のドキュメント内容を図にまとめた。

例えば<button/>なら、HTML DOM 上では HTMLButtonElement で表現され、属性はこのインスタンス内で管理される。id は HTMLButtonElement の親の親にあたる Element のインスタンスプロパティである。ボタンのテキストは Text インターフェースで管理される。これは HTMLButtonElement の子ノードにあたる。

これらのインスタンスを通じて JavaScript 等が HTML を操作し結果がブラウザに反映される。

さいごに

ちなみに SVG も HTML と同様に SVGDOM で操作可能。これもいつかできるのかやってみようかな。

参考