コンソールにて Heloo world と出力されます
下記の解説をします。
let btn = document.querySelector("button");
ノードオブジェクトのbuttonをbtnに代入しています。
function printHello() {
console.log("Hello world");
printHello関数を定義しています。
２番目の記述で、コンソールにHello worldと出力しています
btn.addEventListener("click", printHello);
buttonのノードオブジェクトに対して、clickイベントとprintHello関数を紐付ける仕組みであるイベントリスナを追加する。
DOM
DOMとはDocument Object Model(ドキュメントオブジェクトモデル)の略です。HTMLを解析し、データを作成する仕組みです。HTMLで書かれたファイルは結局ただの文字情報なので、そのまま表示しても意味がありません。HTMLを解析し、CSSやJavascriptによる装飾を行ってから画面に映すという工程が必要です。
ノード
HTML1つ1つのタグが、DOMツリーの中ではノードと呼ばれます。
document.getElementById("id名");
documentは、開いているWebページのDOMツリーが入っているオブジェクトです。documentに対していくつかのメソッドを利用することで、DOMツリーに含まれる要素を抽出して取得することができます。.getElementById("id名")はDOMツリーから特定の要素を取得するためのメソッドの1つです。引数に渡したidを持つ要素を取得します。
document.querySelector("セレクタ名");
セレクタ名とは、CSSでスタイルを適用するために指定している要素です。セレクタ名を指定してDOMを取得する場合、querySelectorメソッドを使用します。HTML上から、引数で指定したセレクタに合致するもののうち一番最初に見つかった要素1つを取得します。
addEventListener
(ノードオブジェクト).addEventListener("イベント名", 関数);
上記のような記述により、この記述の読み込み以降で「ノードオブジェクト」に「イベント」が起きた時、「関数」を実行するようになります。
addEventListener
「ノードオブジェクト」に「イベント」が起きた時、「関数」を実行します。