JSの実装まとめです
●DOMの取得
htmlのid、class、セレクタをjsに取得する物です。
id
document.getElementById("id名");
class document.getElementsByClassName("クラス名");
セレクタ
document.querySelector("セレクタ名");
querySelectorの"セレクタ名"部分は、htmlの一番上を要素として判断する。
注意点
idは、必ず一つなのでgetElementであるのに対して、classは複数存在するのでsが付く。
●イベント
クリックする、タブにマウスを置くをいった動きをjsではイベントと言う
また、ボタンを押し色が変わると行った動作を、イベントリスナと呼ぶ。
例
btn.addEventListener("click", printbyebye);
}
クリックした際、printhbyebyeを実行
●コード解説
下記をざっくり解説します
１行目はwindow要素をloadしfunctionを実行します
btn コンソールにhelloworldを表示。
bts2 btn2をclickしたら、"p"部分を変更されましたに置換し表示
btn3 btn3をclickしたら、赤色に変更。classList.addでクラスを追加してます。
btn4 btn4をclickしたら、blueを削除。classList.removeでクラスを削除
理解がざっくりしてるな。。。
