[JavaScript] DOM/ Node/ Element の違い

まとめ

• DOM（Document Object Model=ドキュメントを物として扱うモデル）：プログラム（JavaScript）からHTMLやXMLを自由に操作するための仕組み、データ構造
  DOMツリーという階層構造を定義しているものがDOMという仕組み
• Node：DOMツリー（オブジェクトツリー）を構成する一つ一つの要素
• Element：Nodeの種類の一種（Element型Node）

詳細

DOM

1. プログラム（JavaScript）からHTMLやXMLを自由に操作するための仕組み、データ構造
   JavaScriptからHTMLドキュメントに要素を追加したり、ボタンクリック時のイベントを登録したり、スタイルや属性を変更したり、要素のサイズや位置を取得したり、こういったものはすべてDOMのAPIを使うことで操作できる。
2. DOMツリー（オブジェクトツリー）という階層構造を定義しているものがDOMという仕組み
   

Node

1. DOMツリー（オブジェクトツリー）を構成する一つ一つの要素（ツリーのひとつひとつの箱（オブジェクト））
   Ex.：html、bodyタグ、pタグ等
   

2. Nodeにはいくつか種類がある

   • Document（Document型Node・ドキュメントノード）
   • Element（Element型Node・エレメントノード）
   • Attr（Attribute型Node・属性ノード）　等

Element

1. Nodeの種類の一種（Element型Node）
2. 例えば、querySelectorAllといったメゾッドは提供されていないので、NodeをElementにしてquerySelectorAllを呼ぶといった処理を実装する。

補足

DOM、Node、Elementの関係

DOM
 |- Node
    |- Document
    |- Element
    |   |- HTMLElement
    |   |- HTMLDivElement
    |   |- HTMLInputElement
    |   |- ...
    |- Attr
    |- ...

参考リンク

• DOM, Node, Elementの違い
• DOM、Node、Elementの違いとそれぞれの使い分け
• JavaScript初心者でもすぐわかる！DOMとは何か？