DOM( Web API )リファレンス

　DOMはテキストをオブジェクトデータとして扱えるようにする仕組みです。オブジェクト化することで JavaScript から素早く検索などの操作をすることができます。
　以下はクラス（インターフェイス、ミックスイン）におけるプロパティ、メソッド、イベントといった定義の継承図です。

Web API継承図

Web API
- ├─ CSS Object Model（style、<style>、CSS外部ファイル）
- └─ DOM
  - ├─ Event ... AnimationEvent、ClipboardEventなど
  - └─ EventTarget
    - ├─ Window
    - ├─ Node
      - ├─ Document
      - ├─ Element
        
        └ HTMLElement ... HTMLAnchorElement、HTMLParagraphElementなど
      - └─ Attr
    - │
    - └─ XMLHttpRequestEventTarget - XMLHttpRequest .. 非同期通信
  - ├─ HTMLCollection

　クラスとはオブジェクトを生成するための設計図のようなものです。都合上、プロパティ、メソッド、イベントを上記のようなを継承という機能によって共通化しています。
　継承図から何となく関連性がみえてくると思います。

　クラスによって生成されたオブジェクトのツリー構造とは別の形をしています。オブジェクトのツリー構造については、DOMを参照してください。

オブジェクトツリー

Window
└─ Document
- └─ <html>
  - ├─ <head>
    - └─ <tite>、<meta>、<link>...
  - └─ <body>
    - └─ <article>、<header>、<main>...

　現在、DOM は Web API に含まれるインターフェイスになっています。そして、CSSはDOMとは別扱いで、CSS Object ModelインターフェイスとしてWeb APIで繋がっています。

　CSSは、Element.style.*で操作します。

　ネット上でGoogleやamazonなどが提供しているデベロッパー向けのAPIもWeb APIやAPIと呼ばれていますのでやや分かり難いです。

　HTMLについては、過去にW3Cが仕様を策定していましたが、現在はWHATWG(Web Hypertext Application Technology Working Group)によるHTML Living Standardが標準になっています。

このサイトは、DOMのみの頃がベースの知識で書いてあるので違う部分は読み替えて頂けると幸いです。

- ad -

DOM

　DOM（Document Object Model）とは、HTMLやXMLなどの文書構造をオブジェクトデータのツリー構造（データ構造）として生成する仕組みです。

　HTMLテキストは DOM によって、以下のようにWindow、Documentを元にしたオブジェクトデータのツリー構造が生成されます。

オブジェクトツリー

Window
└─ Document
- └─ <html>
  - ├─ <head>
    - └─ <tite>、<meta>、<link>...
  - └─ <body>
    - └─ <article>、<header>、<main>...

　この仕組みが、文字列である文章をデータとして扱えるようにしてくれます。そのお陰でJavaScriptなどのスクリプトから文書操作が行えます。

　webページの制作はHTMLタグエレメントから学習をした方が多いかと思いますが、HTMLタグエレメントはDOMという概念からみると別のものに感じられます。
　JavaScriptでwebページを動的に操作するには Web API(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に分類されます。

　ここでのclass属性はHTML属性と呼ばれ、Attrオブジェクトとしてアクセスします。Event、CSS以外は概ねHTML属性です。

　onclick属性はイベント属性といい、該当するイベントが発生するとEventインターフェイスが呼び出されます。イベントはwebページ上でのユーザーの操作やデータのダウンロード、メディアの再生など何らかの動きを捉えます。
　イベントはDOMより上の階層のWeb APIに属するのですが、ここではDOMのカテゴリーで説明しています。

　style属性は、element.style.からアクセスし、CSS Object Modelインターフェイスが呼び出されます。CSS Object ModelインターフェイスはDOMより上の階層のWeb APIに定義されており、DOMとは別のインターフェイスとして扱われています。

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

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

XMLHttpRequestEventTarget、XMLHttpRequest

　XMLHttpRequestEventTarget、XMLHttpRequest は、webページとは非同期にサーバーとの通信を可能にするインターフェイスです。

　webページのロードとは非同期にサーバーと通信する方法を AJAX プログラミングと呼びます。

　AJAX を使うと読み込みが終わったページからリクエストを複数回サーバーに送ることができ、ページの一部だけを更新することもできます。サーバー側の設定によっては、サーバー側からクライアントにリクエストを送ることもできます。

Document、ElementとNode

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

DocumentとElement

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

Document

webページを構成するすべてのElementのルートになるNodeです。ページ全体を操作するにはDocumentオブジェクトにアクセスします。Window全体を操作するにはWidowオブジェクトにアクセスします。

Document継承図

EventTarget
- └── Node
  - 　　└── Document

Element

<html>以下のHTMLタグエレメントの元になるオブジェクトです。
　Elementの継承したオブジェクトとしてHTMLElementインターフェイスがあります。多くのHTMLタグに関するオブジェクト、HTMLBodyElement、HTMLDivElementなどはHTMLElementインターフェイスを継承しています。
　HTMLタグエレメントは、Element（エレメント）、tag element（タグエレメント）、tag（タグ）、属性などとと呼ばれます。

Element継承図

EventTarget
- └── Node
  - 　　└── Element
    - 　　　　└── HTMLElement ...

Node

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

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

Node

webページを構成するエレメントは、Nodeが基本設計になっており、そのプロパティやメソッドを継承しています。

Node継承図

EventTarget
- └── 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...で記述するイベント属性があります。このイベント属性はGlobalEventHandlersミックスインに基づいており、イベントハンドラと呼びます。イベントハンドラはDOMより上の階層のWeb APIに属するのですが、ここではDOMのカテゴリーで説明しています。

　イベントハンドラはEventTargetによってDocument、Element、Windowに設定することができます。
　イベントが発生するとEventインターフェイスやそれに関するUIEventやDragEventなどのインターフェイスに渡され、ユーザー定義のコードなどが実行されます。

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プロパティを使用してアクセスできます。しかしながらブラウザからウィンドウの機能全てを操作できるわけではありません。