JavaScript DOMコードまとめ【jQueryなし】

JavaScript DOMコードのまとめです。

コピペでOK。jQueryなしでやっていきます。随時更新予定。

・変数を作るとき気をつけること

• 「var」じゃなく「let」。固定値には「const」を使う
• 変数名はスネークケース(example_sample)

・functionを作るとき気をつけること

• function名はローワキャメル(exampleSample)
• なるべくシンプルに。30行以内におさめる

addEventListener

element.addEventListener('click', somethingFunction);

クリックしたときに、functionを実行する。

/* Example */
const responsive_menu_btn = document.querySelector('.responsive_btn');
responsive_menu_btn.addEventListener('click', menuToggle);

function menuToggle() {
  const header_menu_detail = document.querySelector('.header_nav');
  header_menu_detail.classList.toggle('menu_active');
}