DOMリファレンス

 DOM(Document Object Model)とは、HTMLやXMLなどの文書構造をオブジェクトの木構造として操作可能する仕組みです。 webページがロードされると、そのテキスト内容をDOMというオブジェクトデータとしてメモリに収めるために、文章解析なしにwebページのデータにアクセスし操作できます。 操作にはJavaScriptを利用することが多いです。

 このページはwebページを開発しながら参照するDOMリファレンスです。DOMは、JavaScriptでwebページを操作するには理解しておくべき知識です。

 HTMLに関するDOMは、以下のHTMLエレメントについてを参照してください。

 HTMLエレメントの属性に関しては、Attrを参照してください。

 HTMLエレメントのイベントに関しては、Event Interfaceを参照してください。

 style属性、CSSに関するDOMは、各ページのSyntax項目のDOM(JavaScript)を参照してください。

 例えば、以下のような<p>タグエレメントがあったとします。

<p(HTML element) class="example_p"(Attr) onclick="func_Example()"(Event) style="border:1px solid silver;"(CSS,Style)>

 <p>タグはHTML Elementです。 class属性、onclick属性、style属性はAttrオブジェクトに分類されます。 onclick属性はイベント属性といい、この属性にによってEventインターフェイスが呼び出されます。 style属性はAttrオブジェクトに分類されますが、詳しくはCSSページを参照してください。

DOM ObjectとInterface

HTMLエレメントについて

 DOMのオブジェクトはパラメーターとメソッドというObject指向に基づいており、自らのデータと振る舞いを持ちます。

 HTMLタグはElementとして扱います。そのルート(根っこ)がDocumentと呼ぶオブジェクトです。それらオブジェクトは、Nodeオブジェクトという設計に基づいています。

Node
webページを構成するオブジェクトは、Nodeが基本設計になっており、そのプロパティやメソッドを継承しています。以下のオブジェクトはNodeが元になっており全てがNodeを継承しています。

 以下はNodeを継承するオブジェクトです。

Document
webページを構成するすべてのElementのルートになるNodeです。
... Element
Document以下のHTMLタグエレメントです。Documentを継承しておりElementと呼ばれます。
NodeList
複数のNodeを管理するためのインターフェイスです。配列として管理します。document.getElementsByTagName()であるエレメントを取得すると、Nodeの配列リスト(NodeList)を返してきます。
NamedNodeMap
複数のNodeを管理するためのインターフェイスです。NodeListのような配列ではなく、名称で管理できます。document.getElementById('foo')でid名のもつエレメントにアクセスできます。

Attr

 Attribute(属性)は、HTMLタグエレメントにおけるidやclassなどの属性です。エレメントの属性の基本設計としてAttrがあります。あらゆるElementがこのAttrオブジェクトを継承しています。

 DOM4でAttrオブジェクトはNodeを継承していません。今後は、AttrからNodeプロパティやメソッドを使用するべきではありません。

Interface

 Interfaceはmethod群です。継承することができます。DOM EventはInterfaceとなっていますがparameterも持つためにEvent Objectとも表現されています。

interface
EventEvent interfaceです。webページにおけるイベントを捉えます。NodeはこのInterfaceを含みます。

Event Interface

 Event Interfaceについてです。

Interface対象イベント
AnimationEventCSSによるアニメーションの動作
ClipboardEventクリップボードの変更
DragEventドラッグ、ドロップによって
FocusEventエレメントにフォーカスが当たる、失う
GamepadEvent
HashChangeEventURLの#(ハッシュ)以降に変化があると
InputEventエレメントの値(コンテンツ)が変化する
KeyboardEventキーボード操作
MouseEventマウス操作
PageTransitionEventwebページに訪れた、離れたとき
PopStateEventウィンドウの履歴に変化があったときに
ProgressEvent外部リソースをロードするとき
StorageEventwindow storageに変化があると
TouchEventタッチデバイス操作
UiEventユーザーインターフェイスに関するEvent Interfaceです。FocusEvent、InputEvent、KeyboardEvent、MouseEvent、TouchEvent、WheelEventの元のEvent Interfaceです。
WheelEvent