備忘録的リファレンス

DOM

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

 webページの制作をHTMLタグエレメントから学習をした方が多いかと思います。HTMLタグエレメントはDOMという概念からみると別のものに感じられます。
 JavaScriptでwebページを動的に操作するにはDOMが存在しているということを理解する必要があるでしょう。

 HTMLタグエレメントはDOMに変換されると、Window、Document、Element、Event、Attr、CSSなどというオブジェクトとして変換されます。

 DOMのオブジェクトはパラメーター、メソッドをもつというObject指向に基づいており、自らのデータと振る舞いを持ちます。 HTMLタグエレメントをDOMではElementオブジェクトとして扱います。
 HTMLタグであるElementのルート<html>がDocumentオブジェクトになります。

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

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

 <p>タグはElementです。 class属性、onclick属性、style属性は、それぞれAttr、Event、CSSに分類されます。
 Event、CSS以外は概ねHTML属性と呼ばれ、Attrオブジェクトとしてアクセスします。
 onclick属性はイベント属性といい、EventTargetインターフェイス経由でEventインターフェイスが呼び出されます。
 style属性は、element.style.からアクセスし、CSS Object Modelインターフェイスが呼び出されます。CSS Object ModelインターフェイスはDOMより上の階層のWeb APIに定義されており、DOMとはまったく別のインターフェイスとして扱われています。
 HTMLタグのルートである<html>がDOMではDocumentとになります。

 *ブラウザが表示されているウィンドウ全体もDOMによって操作でき、Windowインターフェイスとして定義されています。WindowオブジェクトはNodeを継承していません。

 *DOMはブラウザの機能上はWeb APIに分類されていますが、Web API全てを網羅して理解することはほぼ無理です。 いろいろなwebページの作成例やCSS,JavaScript例などを参考にし、webページを制作しながら憶えるのがお勧めです。

Document、ElementとNode

 HTMLタグはDOMではElementとして扱われ、そのルートである<html>はDocumentとして扱われます。 それらElementDocumentもNodeインターフェイスという設計に基づいています。

DocumentとElement

 ElementDocumentもNodeインターフェイスを継承しています。

Document
webページを構成するすべてのElementのルートになるNodeです。ページ全体を操作するにはDocumentオブジェクトにアクセスします。Window全体を操作するにはWidowオブジェクトにアクセスします。
Document継承図
Element
<html>以下のHTMLタグエレメントです。HTMLタグエレメントは、Element(エレメント)、tag element(タグエレメント)、tag(タグ)、属性などとと呼ばれます。
Element継承図

Node

 ElementインターフェイスDocumentインターフェイスNodeインターフェイスという設計に基づいています。そのためにNodeのプロパティやメソッド、EventTargetを継承しています。

 さらに複数のNodeを扱うためにNodeListインターフェイスが定義されています。NodeListインターフェイスはNodeオブジェクトのハンドラーを配列として管理します。複数のオブジェクトを扱う方法はこれらインターフェイスが提供しています。

Node
webページを構成するエレメントは、Nodeが基本設計になっており、そのプロパティやメソッドを継承しています。
Node継承図
NodeList
複数のNodeを管理するためのインターフェイスです。 複数のNodeを配列として管理します。document.getElementsByTagName()やdocument.querySelectorAll()メソッドでエレメントを取得すると、NodeListを返してきます。

 このNodeインターフェイスは、on...で記述されるイベント属性のためのEventTargetインターフェイスを継承しています。EventTargetからEventが呼び出されます。

Attr

 Attribute(属性)は、HTMLタグエレメントにおけるidやclassなどの属性です。 エレメント属性の基本設計としてAttrインターフェイスがあります。Elementオブジェクトから、それ自身のAttrオブジェクトにアクセスできます。

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

EventTargetとEvent

 HTMLタグエレメントにはon...で記述するイベント属性があります。 このイベントはEventTargetという仕様に基づいています。このEventTargetをNodeが継承しています。そのためにDocumentElementなどで使うことができます。

 EventTargetインターフェイスを経由してEventタイプが呼び出されます。

CSS

 HTMLタグのstyle属性、CSSはCSS Object Modelインターフェイスとして設計されており、JavaScriptからアクセスできるようになっています。

 ElementからCSSにアクセスするには、Element.style.*と編集します。

 CSSはCSS Object Modelインターフェイスで定義されています。DOMより上の階層のWeb APIに定義されており、DOMとはまったく別の仕様として扱われています。

 CSSの各ページの構文(Syntax)項目のDOM(JavaScript)を参照してください。

Window

 webページが表示されるOS上のウィンドウはWindowオブジェクトとして扱われます。Windowオブジェクトにはdocument.defaultViewプロパティを使用してアクセスできます。しかしながらブラウザからウィンドウの機能全てを操作できるわけではありません。