HTMLとDOMとの違いメモ

フロントエンドをたまに遊びでいじっているのだが、HTMLとDOMって何が違うのかよくわかっていなかったので調べたメモ。

• HTMLはMarkup Languageとあるように、ドキュメントをマークアップする一種のシリアライズフォーマットである。
• DOM(Document Object Model)はより高いレベルの概念であり、シリアライズ形式を関知しないが、ドキュメントをツリーモデルとして表現するセマンティクスを提供する。
• わかりやすくメンタルモデルを表現すると、ブラウザ(やnodeなどそれに準じるもの)がHTMLをパースし、対応するDOMモデルがオブジェクトとしてメモリ上に展開される、といえる。
• プログラミング言語からはDOMを通じてドキュメントを操作する。
• このためHTMLはDOMと等価ではない。
• このためHTMLの属性といった構成要素がDOMと一対一対応するとは限らない。
  • HTMLの属性(attribute)は、一般的に同名のDOMオブジェクトのプロパティ(property)に写される。
  • DOM上の読み取りがHTMLの同名の属性の読み取りに対応し、書き込みも同様であるようなプロパティをrefrected propertyと呼ぶ。
    • 例えばidプロパティは読み取るとid属性の値が読み取られ、書き込みも同様なのでrefrected propertyである。値に制約がないので、特にpure refrected propertyと呼ぶ。
    • 例えばinputのtypeプロパティはreflected propertyである。しかし取れる値に制約がある(textなど)ため、pureではない(敢えて呼ぶならimpure property?)。
    • 例えばinputのvalueプロパティはreflectedではない。というのも、読み取りは実際のinputの値が読み出され、HTML上の値を反映しないから。
    • reflectedではない属性をDOMから直接扱いたい場合はattributesプロパティを利用する。
• このような属性の扱いの差異などから見ても、HTMLとDOMは別物。あくまでDOMはメモリモデルのようなもの。

参考文献

stackoverflow.com