JavaScriptの学習・参考リファレンス/ドキュメント

JavaScript、ECMAScriptの学習と参考メモ 入門~初心者~中級者~上級者を目指して

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
ドキュメントオブジェクトモデル (DOM,Document Object Model)の継承関係
作成日 : 2020年06月29日