DOMとは (2)

以下のような HTML があるとします。

要素の選択: document.querySelector (1)

document.querySelector() は、CSS のセレクタを使って要素を 1 つ取得するメソッドです。

要素の選択: document.querySelector (3)

セレクタに一致する要素がない場合、null という値が返されます。

要素の選択: document.querySelectorAll (1)

document.querySelectorAll() は、セレクタに一致するすべての要素を取得します。

要素の選択: document.querySelectorAll (2)

querySelectorAll() で取得した要素は、for...of を使って一つ一つの要素に対する処理を行うことができます。

(参考) 要素の追加: document.createElement(), appendChild()

特定の要素の中に追加することもできます。

(参考) スタイルの操作: element.style

JavaScript から要素のスタイルを直接変更できます。

(参考) 属性の操作: setAttribute()

要素の属性（id, class, src など）を JavaScript で変更できます。

画像を変更

要素に対するイベントを取得する

addEventListener() を使って、イベントが発生したときに実行する処理を登録し、ユーザーの操作に反応する処理が記述できます。

(参考) 複数のイベントを割り当てる

同じ要素に対して、複数のイベントリスナーを登録できます。

イベントオブジェクト (1)

イベントが発生すると、イベントオブジェクトが自動的に関数に渡されます。

イベントオブジェクト (3)

event.target を使って、クリックされた要素を取得できます。

既定の動作の抑制

一部の要素は、ユーザーの入力に対して既定の動作（デフォルトの動作）を持っています。イベントオブジェクトの .preventDefault() というメソッドを使うことで、この動作をキャンセルすることができます。

イベントのバブリング (1)

HTML 要素は入れ子になっていることが多いです。

イベントのバブリング (3)

イベントのバブリングを使うことで、子要素のイベントをまとめて検知できる処理を親要素に書くことができます。

(参考) DOM の API を利用した場合と React を利用した場合の例