DOM操作とイベント処理を学ぶ

ブラウザはHTMLを読み取ると、JavaScriptから操作できる文書の構造を作ります。この構造をDOM（Document Object Model）と呼びます。

このレッスンでは、ボタンを押すと説明文の表示状態が変わる処理を作ります。HTML、CSS、JavaScriptの役割を混ぜずに実装します。

操作するHTMLを用意する

JavaScriptから識別できるようにボタンと対象要素へクラスを付けます。ボタンには初期状態を表すaria-expandedと、操作対象を示すaria-controlsを指定します。

次の画像は、「操作するHTMLを用意する」で扱うコードや構成をブラウザで表示した結果です。

<button
 class="details-button"
 type="button"
 aria-expanded="false"
 aria-controls="details"
>
 詳細を見る
</button>

<div class="details" id="details" hidden>
 <p>Web制作の学習内容を紹介します。</p>
</div>

DOMから要素を取得する

document.querySelector()へCSSと同じ形式のセレクターを渡し、最初に一致する要素を取得します。要素が存在しない場合はnullになるため、処理を始める前に確認します。

次の図では、「DOMから要素を取得する」の仕組みや関係を確認できます。

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

if (button && details) {
 // 要素がある場合だけイベントを登録する
}

クリックイベントを受け取る

クリック前は詳細を隠し、利用者が必要なときに開ける状態にします。

ボタンを押すとCSSクラスが切り替わり、詳細内容が表示されます。

addEventListener()を使うと、クリックなどの出来事が起きたときに関数を実行できます。HTMLへonclickを直接書かず、処理をJavaScriptへまとめます。

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

if (button && details) {
 button.addEventListener("click", () => {
  const isOpen = button.getAttribute("aria-expanded") === "true";

  button.setAttribute("aria-expanded", String(!isOpen));
  details.hidden = isOpen;
 });
}

見た目の変更はCSSクラスへ任せる

複雑な見た目をJavaScriptから1つずつ変更せず、JavaScriptでは状態を表すクラスを付け外しし、具体的な装飾をCSSへ書きます。

次の図では、「見た目の変更はCSSクラスへ任せる」の仕組みや関係を確認できます。

.menu {
 display: none;
}

.menu.is-open {
 display: block;
}

状態を支援技術へ伝える必要がある操作では、クラスだけでなくaria-expandedなどの属性も同時に更新します。

操作を繰り返して確認する

1. クリックして開く・閉じるを繰り返す
2. TabキーとEnterキーでも操作する
3. aria-expandedとhiddenが状態に合っているかElementsで確認する
4. Consoleにエラーがないか確認する
5. JavaScriptが読み込めない場合でも重要な内容を失わないか確認する