🔰ざっくり理解！ DOMって何？
DOMとは、Document Object Model (ドキュメントオブジェクトモデル) の
略称で、JavaScript などを使ってウェブページの要素を動かしたり変更したり、操作できる仕組みのこと。
例えば、DOMを操作することによって「テキストの書き換え」「要素の表示・非表示の切り替え」などができる。
📚️補足
Document（ドキュメント）
⇒ HTML言語で作られた「ウェブページ」のこと
Object（オブジェクト）
⇒ ウェブページを構成する「一つ一つの要素*」のこと
*例：見出し、段落、画像など
--------------------------------
ウェブページが画面表示されるまで
Google Chromeなどのブラウザでは、以下の３つの手順で動くことによって画面上にウェブページを表示している。
1️⃣ HTMLコードの解析
↓
2️⃣ 解析結果をもとに、HTMLコードをDOMツリー* に変換する
↓
3️⃣ DOMツリー* にしたがって、画面表示する
* DOMツリーとは…
DOMツリーとは、HTMLコードを階層的に表したデータ構造のこと。
名前のとおり、木が枝分かれするような形が特徴的。
例えば、以下のコードから、以下画像のDOMツリーが作られる。
<html>
<head>
<title>Progate</title>
</head>
<body>
<h2>DOMについて学ぼう</h2>
<p>DOMはDocument Object Modelの略称です。</p>
</body>
</html>
引用 | https://prog-8.com/docs/dom
このDOMツリーを構成する各要素が、冒頭で述べたオブジェクトのことを指し、これら一つ一つの要素のことを「ノード」と呼ぶ。
📚️補足
ノード
⇒ DOMツリーを構成する個々の要素のこと
オブジェクト（詳細）
⇒ プロパティとメソッドを持つようなデータ型をもつ要素のこと
ノードもオブジェクトも「要素」を指す言葉。文脈や切り口によって呼び名が変わるイメージ
例：わたしを「日本人」とも呼ぶし、「男性」とも呼ぶ感じ
また、JavaScript を使ってノードに変更を加えることを「DOM操作」と
呼ぶ。