DOM ってナニモノ？
なんで書こうと思ったの？
React ベースのフロントエンドを書いていたとき，レビューでこう言われました．
友達「React は宣言的 UI です．命令的 UI のように DOM の更新を手書きしないでください．」
いや，言いたいことはわかる．わかるけど，DOM ってナニモノなんだっけ...？
ちょっとモヤモヤが残ってしまったので，今回は DOM についてちゃんと調べてみることにしました．
参考にした本
「作って学ぶ ブラウザの仕組み」
途中まで読んでみていて，話がつながりそうだったので参考にさせていただきました．
めちゃくちゃ良い本だったのでオススメです！！
DOM とは？
Domain Object Model の略で，HTML の要素と JavaScript などの HTML の外の世界とのインターフェースをオブジェクトで表現したものです．これにより，JavaScript などのスクリプト言語から HTML 文書を操作，利用することが可能になっています．
ほうほう...？
DOM は HTML 文書の階層関係を概念的に木構造で定義したもののようです．
HTML は本来ただの文字列なので，そのままではプログラムから触れません．
なので，HTML の文字列を DOCTYPE や開始タグなどのトークンに分割した後のデータを，スクリプト言語が操作できる形に変換したい，というモチベーションのために，トークンを DOM に変換する，とのこと．
DOM のインターフェースは，特定の種類のノードや要素に関連するプロパティやメソッドを提供します．インターフェースを実装したオブジェクトでは，インターフェースが定義されているデータにアクセスしたり操作を行ったりできます．
読み進めていく & 調べていく中で上記の文章に出会い，「DOM」と「DOM の操作」が繋がってきた．
DOM によりノードのインターフェースを定義しており，スクリプト言語はインターフェースに記されている定義に基づいてノードを参照したり更新したり（操作）する，ということなのかな．
DOM ツリーとは？
DOM を調べていく中で，DOM ツリーというものが目に止まりました．これは DOM とどう違うんだろう？と思い，ここについても調べてみました．
DOM ツリーは，ノードによって構成されています．ノードは Node インターフェースを実装するオブジェクトです．ノードの定義は DOM Living Standard の仕様書で IDL によって記述されています．
参考にした書籍の説明は上記のもので，イマイチ掴みきれなかったのでドキュメントオブジェクトモデル (DOM) - Web API | MDNを読んでみました．
DOM ツリーは一種のツリー構造で、ノードが HTML または XML 文書のコンテンツを表します。それぞれの HTML または XML 文書は固有の DOM ツリーの表現を持っています。
つまり，DOM ツリーは DOM の論理的構造を木（ツリー）として表現したものらしいです．（私の見解です）
Node を継承しているインターフェースたち
DOM を構築するノードは Node インターフェースを実装するオブジェクトですが，書籍に
2024 年時点で，Node を継承しているものを書いていてくれたので引用すると．
- Element
- Attr
- Text
- CDATASection
- ProcessingInstruction
- Comment
- Document
- DocumentType
- DocumentFragment
とのことです．
ここでようやく知っている単語が出てきました．一安心...
開発者ツールで見たことがある「Elements」タブの構造は DOM ツリーの中身...？なんでしょうか．
余談: HTMLElement を見つけた話
調べているうちに，HTMLElementというインターフェースを見つけました．
MDN のページを見ると，HTML のあらゆる要素に共通する性質をまとめた“ベースクラス”的な存在のようです．
コードを読んでいるとたまに見かけるけど，ここにも繋がるんだなぁ，と思いながら見ていました．
例：
まとめ
DOM は HTML 文書の階層関係を概念的に木構造で定義したもの．
DOM はあくまでの概念的な構造であり，明示的に木構造にしたものを DOM ツリーと呼ぶ．
書きながら，React の仮想 DOM と今回紹介した DOM って何が違うんだろう...？となったので，次はその記事を書くかもしれません！
Discussion