備忘録です。
間違いなどございましたらご指摘ください。
DOMとは
HTMLとXMLドキュメントへのAPI
（わかりやすくいうと、プログラムからHTMLやXMLを自由に操作するための仕組み、インターフェイス)
JavaScriptからHTMLに要素を追加したり、ボタンクリック時のイベントを登録したり、スタイルや属性を追加したり、要素のサイズや位置を追加したり、こういったものはすべてDOMのAPIを使うことで操作できる。
DOMツリー
DOMはHTMLドキュメントを『オブジェクトのツリー』として扱っている。これを『DOMツリー』という。
Image may be NSFW.
Clik here to view.
Nodeとは
ノードとは各要素(HTMLではエレメントやタグという)自体のことを表す。（つまり、上の図のひとつひとつのボックスがNode）
特定のノードを基準としたときに、その上にあるノードを「親:parent」ノードと表現し、その下にあるノードを「子:childまたはchildren」ノードと表現する。
例えば「そのタグの子ノード全体を取得して、その親ノードから削除する」のような言い方ができる。
firstChildやparentNodeなどのプロパティ、appendChild、removeChildなどのメソッドはNodeが提供している機能。
Nodeの種類
- Document(Document型Node・ドキュメントノード)
- Element（Element型Node・エレメントノード）
- Attr（Attribute型Node・属性ノード）
など
Elementとは
さきほどNodeにはいくつか種類があると説明した。
ElementはそのNodeの中のひとつ、Element型のNodeのこと。
HTMLの要素はElementを継承しておりElement<-HTMLElement<-HTMLDivElementのようになっている。
classListやinnerHTMLなどのプロパティ、getElementByIdやquerySelectorAll、setAttributeなどのメソッドはElementが提供している機能。
まとめ
DOM
- HTMLドキュメントとJavaScriptをつなぐインターフェース
- DOMツリーはNode構成されている
Node
- DOMツリーを意識して操作を行うときのオブジェクト
- 例: appendChild、removeChild、parentNodeなど
Element
- HTMLドキュメントの要素を意識して操作を行うときのオブジェクト
- 例: style、attribute、width、heightなど
参照
https://kuroeveryday.blogspot.com/2018/11/difference-between-dom-and-node-and-element.html
https://eng-entrance.com/what-is-dom
