DOMって？DOMの基本。ー雰囲気理解を理解するー
「DOMってよく聞くよな〜」
「なんか、あの、ツリーのやつでしょ？」
と、DOMがよく話に出るものの理解しきれていなかったので、今回まとめてみます。
同じような方も多いと思うので、参考になれば嬉しいです。
DOMって何よ？
DOMとは、JavaScriptでHTMLの要素を操作するための仕組みです。
現在よく利用されている言語のほとんどがサポートしています。
具体的にどんなんよ？
とはいえ、まだ想像はつきづらいですよね。ということで具体的に例を挙げてみます。
検証ツールで見るあれ、あれがDOMツリーです。
あれ↓。（右側）
ブラウザはDOMを使って画面を表示します。
DOMはHTMLから作られます。
DOMはAPIを持っていて、それのおかげでJavaascriptから操作ができるようになります。（詳しくは次の項目へ)
getelementbyid や onclick はその API のひとつです。
DOMは、そのAPI(Document)に加え、element(divタグなど)、text(pタグの間に入るような文字)も持っており、その箱の１つ１つを"DOMEノード"と呼びます。
なんで必要なの?
クライアントサイドJavascriptプログラミングでは、「ユーザーからなんらかの入力を受け取って、これを処理した結果をページに反映させる」という流れが一般的です。
ページに反映させる、つまり、HTMLをJavascriptから編集するということです！
この時に、文字列として編集することも可能ですが、div要素やアンカータグといった塊で操作できた方が便利です。
そこで登場するのがDOMです！✌️いえーい
構造
DOMは、ドキュメントを文書ツリーとして扱います。
例えば、下記のようなコードなら、DOMの世界ではその下のツリー構造と解釈されることのなります。
<!DOCTYPE html>
<html>
<head>
<meta charaset="UFT-8" />
<title>タイトルだよん</title>
</head>
<body>
<p id="great">これが<span>文書ツリー</span>です。</p>
</body>
</html>
DOMでは、Document Object Modelという名前の通り、文書に含まれる要素や属性、テキストをそれぞれオブジェクトと見なし、「オブジェクトの集合（階層関係)が文書である」と考えるのです。
ちなみに、
文書を構成する要素や属性、テキストといったオブジェクトのことをノードと呼びます。DOMは、これらのノードを抽出・追加・置換・削除するための汎用的な手段を提供するAPIなのです🐥
Discussion