まとめ
-
DOM（Document Object Model=ドキュメントを物として扱うモデル）：プログラム（JavaScript）からHTMLやXMLを自由に操作するための仕組み、データ構造
DOMツリーという階層構造を定義しているものがDOMという仕組み - Node：DOMツリー（オブジェクトツリー）を構成する一つ一つの要素
- Element：Nodeの種類の一種（Element型Node）
詳細
DOM
-
プログラム（JavaScript）からHTMLやXMLを自由に操作するための仕組み、データ構造
JavaScriptからHTMLドキュメントに要素を追加したり、ボタンクリック時のイベントを登録したり、スタイルや属性を変更したり、要素のサイズや位置を取得したり、こういったものはすべてDOMのAPIを使うことで操作できる。 -
DOMツリー（オブジェクトツリー）という階層構造を定義しているものがDOMという仕組み
Node
-
DOMツリー（オブジェクトツリー）を構成する一つ一つの要素（ツリーのひとつひとつの箱（オブジェクト））
Ex.：html、bodyタグ、pタグ等
-
Nodeにはいくつか種類がある
- Document（Document型Node・ドキュメントノード）
- Element（Element型Node・エレメントノード）
- Attr（Attribute型Node・属性ノード） 等
Element
- Nodeの種類の一種（Element型Node）
- 例えば、querySelectorAllといったメゾッドは提供されていないので、NodeをElementにしてquerySelectorAllを呼ぶといった処理を実装する。
補足
DOM、Node、Elementの関係
DOM
|- Node
|- Document
|- Element
| |- HTMLElement
| |- HTMLDivElement
| |- HTMLInputElement
| |- ...
|- Attr
|- ...