DOMとは
ドキュメントオブジェクトモデル (DOM,Document Object Model)についての説明です。
ドキュメントオブジェクトモデル (DOM,Document Object Model)とは
ドキュメントオブジェクトモデル (DOM,Document Object Model)とは、
JavaScript等のプログラム言語からHTMLやXML等の文書にアクセスしたり操作する際に使用するデータの表現です。
JavaScriptからDOMにアクセスすることで文書の情報を取り出したり、 変更を加えることでWebページの見た目を変化させる事できます。
DOMでアクセスできるインターフェイスの一部としては以下のようなものがあります。
- Window
- ブラウザのウィンドウの幅や高さ、現在のタブのURLや履歴、あるいは、グルーバルで使用できる各種のデータにアクセスしたり、スクロール調整やダイアログ表示を行います。
- Document
- ブラウザのタブで表示されているWebページの文書全体です。ここから、bodyやhead、titleといった情報にアクセスできます。
- Node
- 文書の構造を示すインターフェイスです。例えば、firstChildやlastChildで子ノードにアクセスしたり、parentNodeで親のノードにアクセスしたりできます。子ノードの追加や除外といった処理も行います。
- Element
- 文書の要素を示すインターフェイスです。例えば、属性やclass、要素の高さや幅、HTMLへのアクセスを行います。要素へのイベント設定や、タグ・クラス名称からの子要素の取得も行います。
インターフェイスの継承関係
文書の構造としては、Windowの中にDocumnetが存在し、Documentの中に複数のNodeやElementがあるというイメージになりますが、クラス・インターフェイスの継承関係としては以下のようになっています。(下の図にはありませんが、WindowもEventTargetを継承しています)
graph RL
Node --> EventTarget
Attr --> Node
CharacterData --> Node
Document --> Node
DocumentFragment --> Node
DocumentType --> Node
Element --> Node
Comment --> CharacterData
ProcessingInstruction --> CharacterData
Text --> CharacterData
XMLDocument --> Document
HTMLElement --> Element