Keiです。
遂に来ましたDOMです。（謎の苦手意識）
やっていきます。
DOMとは
Document Object Model：HTMLやXMLドキュメントをプログラムが読み書きしやすい形で表現したもの。
これを使うことにより、JavaScriptからHTMLの内容を変更したり、イベント管理をすることが出来る。
要するに、JavaScriptがHTMLをいじくりまわせるようになるってこと。
基本概念
ツリー構造：DOMはノード（タグ、テキスト、属性など）の集合体で、ツリー形式であらわされる。
例えば、＜html＞タグの中に＜body＞タグがあり、その中に＜p＞タグがある場合、これらは親子関係にあるといえる。
ノード：すべての要素、属性、テキストなどはノードとして表現される。
それぞれのノードには特定の型があり、例えば要素ノード、テキストノード、など。
JavaScriptでDOM（HTML）を操作する
①要素の選択：「document.getElementById()」、「document.querySelector()」などのメソッドを使ってHTMLの要素を選択する。
②要素の変更：選択した要素の「textContent」や「innerHTML」プロパティを変更して
テキストの内容を変更する。
③要素の追加と削除：「docment.createElement()」で新しい要素を作成し、「appendChild()」で追加する。削除は「removeChild()」で出来る。
④イベントリスナー追加：「addEventListener()」でクリックやマウス操作などのイベントに対応する関数を設定できる。
実例：HTMLのボタンをクリックして、テキストを変更する
HTML：
<button id="myButton">クリック</button>
<p id="myText">こんにちは！</p>
document.getElementById('myButton').addEventListener('click', function() {
document.getElementById('myText').textContent = 'ボタンがクリックされました。';
});
この例では＜p＞タグのテキストが「ボタンがクリックされました。」に変更される。
まぁ、実際に書いて実行してみるのが一番理解が早いかもしれない。
”仮想”DOMって何者だ？（ちょっとした脱線）
Reactのようなフロントエンドのライブラリやフレームワークでよく目にする”仮想”という名前のDOM。
この正体は、ブラウザのDOMとの相互作用を効率化し、アプリケーションのパフォーマンスを向上させることにあるという。（要するにただのDOMは重いんだ）
要するに何なんだ
仮想DOMは、実際のDOMを軽量化したコピーである。
この仮想コピーはJavaScriptのオブジェクトとして保持されるため、ブラウザのDOMよりも操作が速い。
もっさりと動くWebサイトとか、みんな気持ち悪くてブラウザバックするよね？
要するに、HTMLとJavaScriptの間で発生するやり取りを高速化してサクサク動かすってことだ！！
どうやって動いてるの
①初期レンダリング：ユーザーがアプリケーションを訪れた時、すべてのUIが仮想DOMによってレンダリング（読み込み）される。
②UIの変更：アプリケーションで何かが変更されたとき、（例えばボタンをクリックしたり、データを読み込んだり）新しい仮想DOMのツリーが生成される。
③差分計算：ユーザーが何らかのアクションをして、ツリーを変更後の仮想DOMと変更前のDOMを比較して、どの部分が変わったのかを特定する
④効率的な更新：変わった部分だけを取り出し、それを使って実際のDOMを更新する。
これによって必要な部分だけが更新され、全体のパフォーマンスが向上する。
要するに？（わかりにくいから物語形式にしてみた）
DOM君：JavaScriptを使ってHTMLを動かしたいんだけど、ボク不器用だから一部だけ触るとかできないし、全部まとめて触っちゃうから仕事が遅いって怒られた･･･
仮想DOMパイセン：おう！だったらオレが変更された部分だけをDOM君に教えてやる！そしたら変更された部分だけを動かせばいいから、効率がいいだろ？
DOM君：ほんとだ！これならどんなに大きなプログラムを動かしていても、仮想DOMパイセンが必要な部分だけを教えてくれるから仕事がすごくはかどる！！！
DOM君：でも、パイセンがいるならボクは要らないんじゃ･･･
仮想DOMパイセン：そんなことはないぜ！オレは直接的にHTMLを触ることが出来ないんだ。だから、DOM君がいなきゃ仕事が終わらねぇ！
仮想DOMパイセン：それだけじゃないぜ！オレがこうやってDOM君に実際の操作を任せることで、オレはUIの状態管理に集中できるようになるから楽なんだ！！
DOM君：わ、わかりました！これからも不器用なボクに変更されたところを教えてください！頑張ります！！！
（茶番乙でした
まとめ
DOMはJavaScript側からHTMLやXMLテキストを操作、変更するための技術。
そして仮想DOMはDOMに”変更された部分”だけを教えることで全体の効率を向上させる。
物語形式分かりやすくていいかもしれない（書いてる自分はなんか虚無だったけど）
