DOM操作とイベント

ブラウザはHTMLをDOMというオブジェクトとして扱います。JavaScriptから要素を取得し、内容やclassを変更できます。

このLessonのゴール

• document.querySelectorでHTML要素を取得できる
• クリックイベントを受け取り、要素の状態を変更できる
• ボタン操作によってページ内の表示を切り替えられる

今回新しく作るファイル

with-cafe/practice/javascript/
├── 04-dom-events.html
└── 04-dom-events.js

04-dom-events.htmlへボタンとナビゲーションを記述し、04-dom-events.jsから操作します。Level 4では、この練習をWith Café本体のスマートフォンメニューへ応用します。

<script src="04-dom-events.js" defer></script>

ブラウザで確認するファイル

04-dom-events.htmlをブラウザで開きます。このLessonではConsoleだけでなく、ページ内のボタンを押したときにメニューの表示が変わることも確認します。

<button type="button" class="menu-button">メニューを開く</button>
<nav class="menu" hidden>...</nav>

const button = document.querySelector(".menu-button");
const menu = document.querySelector(".menu");

button?.(,  {
  menu?.();
});