DOM( Web API )リファレンス

　DOM は HTML テキストをオブジェクトデータとして扱えるようにする仕組みです。オブジェクト化することで 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 は、CSS Object Model インターフェイスとして Web API に DOM とは別として繋がっています。

　スタイルシート設定は Document.prototype.styleSheets または HTMLElement.protorype.style プロパティで取得できます。
　エレメントの class 属性は Element.classList.add() で追加、 Element.classList.remove() で削除することができます。
　詳しくはCSS の取得と設定ページを参照してください。

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

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

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

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