Quantcast
Viewing all articles
Browse latest Browse all 8695

DOM, Node, Elementについて

備忘録です。
間違いなどございましたらご指摘ください。

DOMとは

HTMLとXMLドキュメントへのAPI
(わかりやすくいうと、プログラムからHTMLやXMLを自由に操作するための仕組み、インターフェイス)

JavaScriptからHTMLに要素を追加したり、ボタンクリック時のイベントを登録したり、スタイルや属性を追加したり、要素のサイズや位置を追加したり、こういったものはすべてDOMのAPIを使うことで操作できる。

DOMツリー
DOMはHTMLドキュメントを『オブジェクトのツリー』として扱っている。これを『DOMツリー』という。

Image may be NSFW.
Clik here to view.
image.png

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


Viewing all articles
Browse latest Browse all 8695

Trending Articles