JavaScriptのDOMとイベントリスナについて

DOMとは、Document Object Modelの略称であり、HTMLやXMLを操作するためのAPIである。

JavaScriptでは、このDOMと呼ばれるAPIを介してテキストを変更するなどの何らかの処理を要求し、HTMLを動的に変化させている。
(例えば、hoverした時にセレクタを変化させてボタンの色を変えるなど)

.js

const h1Element = document.querySelector('h1');
console.log(h1Element);//取得したDOM要素の詳細が表示される。例：<h1>テキスト</h1>
console.dir(h1Element);//h1ElementのDOMオブジェクトの実体。オブジェクトのプロパティが一覧で表示される。

console.dirの実行結果

h1Elementの中の文字列を変更したい場合は、textContentを使う

.js

h1Element.textContent = '変更後のテキスト';
//JavaScriptでは、オブジェクトの形式でHTMLにアクセスする。

HTMLをJavaScriptで操作するためのh1Elementなどのオブジェクトのことを、下記のように呼ぶ
・DOM
・DOMオブジェクト
・ノード
・エレメント

イベントリスナとは、クリックやホバーなど何らかのイベントが発生した時に、そのイベントを検知する機能を指す。
イベントリスナは第一引数と第二引数をもち、第一引数には検知するイベントの種類（Click, Hover mouseoverなど)を、第二引数に関数を登録する。
イベントリスナは第一引数で登録されたイベントを検知した際に、第二引数の関数が実行される。
イベントリスナに登録する関数（第二引数として記述する関数）のことは、イベントハンドラもしくはアクションと呼ぶ。

.js

const btnEl = document.querySelector('button');
btnEl.addEventListner('click', (e) => {
    console.log(e.target);//<button>クリック</button>
    console.log('hello');
});

上記例では、buttonのDOM要素をbtnElとして取得し、二行目でイベントリスナの処理を記述している。
イベントリスナでは第一引数として'click'イベントが、第二引数に無名関数が指定されている。
イベントハンドラの中の引数eはe,ev,eventと表記されることが多く、これは何のイベントが発生したか（clickやhoverなど）やどのDOM要素でイベントが発生したかなど、イベント発生時の情報が自動的に格納されるイベントオブジェクトと呼ばれるものである。

例えば、イベントオブジェクトには下記のような物が格納される。
・type：発生したイベントの種類。上記記述では、click
・target：イベントが発生したDOM要素。上記では、button