業務ではjQueryばっかり書いているのですが、JavaScriptをしっかり覚えられていないのでぼちぼちjsも慣れておくか～って思って参考サイト見返してるときに…
そういえばDOMやらそこら辺の認識が曖昧だな？と思ったのでまずはそこら辺の復習。
DOM
Docment Object Modelの略。
JavaScriptなどのプログラミング言語からHTMLなどのマークアップ言語とCSSにアクセスできるようにするためのAPIのことを指す。
DOMを介してHTMLやXMLの構造を定義し、文書へのアクセスや操作、変更が可能になる。
HTMLの構造全体をDOMツリーと呼ぶ。DOMツリーはNodeで構成されている。
Node
DOMツリー配下に存在する1つ1つの要素。
DOMツリーを意識して操作を行うときのオブジェクト。
例: appendChild、removeChild、parentNodeなど
Nodeの種類は何種類か存在する。
Document（Document型Node・ドキュメントノード）
Element（Element型Node・エレメントノード）
Attr（Attribute型Node・属性ノード） etc.
Document
Nodeの種類の一種。
ドキュメント全体を表すオブジェクト。
document.getElementxxx()はDOMツリー全体から引数に指定されたidやclassの要素を取得する。
Element
Nodeの種類の一種。Nodeの中のタグにあたる部分。
タグに対して操作を行うときのオブジェクト。
例: style、attribute、width、heightなど
こんな感じのイメージ
腑に落ちた参考サイト：https://kuroeveryday.blogspot.com/2018/11/difference-between-dom-and-node-and-element.html