DOMとは
DOMはDocument Object Modelの略で、JSからHTMLの情報を取得し、データを作成する仕組みのこと。
このDOMによって解析されたHTMLは階層として捉えられる。
DOMツリー
<body>
<header>
</header>
<div class = 'contents'>
<div class = 'left-content'></left-content>
<div class = 'right-content'></right-content>
</div>
<footer>
</footer>
</body>
上記のコードを階層として捉えると
こんな感じ↑
そして階層構造のあるデータをDOMツリーやドキュメントツリーと言い、JSはこのDOMツリーを操作することができる。
DOMツリーの要素である、bodyやheaderなどの要素をそれぞれノードと言い、JSでHTMLを操作する時（表示の変更や、クラスの付与、いわゆるJSで画面に動きを持たせたい時）はまず、このDOMを構成する要素の取得が必要になる。
細かいメソッドなどは割愛するが、流れとしては
①DOMツリーからノードを取得する
↓
②JavaScriptで、取得したノードに対する処理を書く
↓
③HTML側に反映させる
といった具合。
また、②の取得したノードに対する処理を実装する上で重要な概念がある。
イベント駆動
取得したノードオブジェクトに対して、処理が行われるきっかけとして、イベントと言う処理要求が起こる。
イベントは、クリック、特定の場所にカーソルを合わせる、ページの読み込みなど、様々だ。
イベントが発火することによって、取得したノードオブジェクトに対し、処理が行われ、画面上に反映される。
例えば、ボタンのクリックをした際に「送信しました」と言うアラートメッセージを表示させたい時↓
#省略
let btn = document.getElementById("submit");
function message() {
window.alert("送信しました");
}
btn.addEventListener("click", message);
まずid名が「submit」のノードオブジェクトの取得を１行目で行い、変数btnに代入。
そして最後の行で取得したノードに対し、クリックイベントが起きた場合、関数messageを行うと書かれている。
関数messageには「送信しました」と言うアラートメッセージを表示すると言う処理を記述。
つまり、取得したノードに対し、何らかのイベントが起きた場合、処理を行うと言うのがイベント駆動の概念であり、JSはイベント駆動の概念を元に作られてる。