DOM操作とイベント ― ページを動かす

導入

Webページは、HTML の要素が木構造（ツリー）で並んだものです。この木を JavaScript から表したものが DOM（Document Object Model）です。JavaScript でボタンのクリックに反応したり、文字を書き換えたりするのは、すべて DOM を操作しています。

説明

ブラウザには document というオブジェクトがあり、そこからページの要素を取り出します。要素を探す基本は querySelector（CSSセレクタで1つ取る）です。

// <h1 id="title">こんにちは</h1> があるとき
const title = document.querySelector("#title");
console.log(title.textContent);   // こんにちは
title.textContent = "ようこそ";    // 文字を書き換える

要素の見た目や中身は、主にこんなプロパティで変えます。

イベントは「クリックされた」「入力された」などの出来事です。addEventListener で「この出来事が起きたらこの関数を実行する」と登録します。

const button = document.querySelector("#save");
button.addEventListener("click", () => {
  console.log("保存ボタンが押された");
});

要素を新しく作って追加することもできます。リスト表示などで使います。

const list = document.querySelector("#items");
["りんご", "みかん"].forEach((name) => {
  const li = document.createElement("li");
  li.textContent = name;
  list.appendChild(li);   // ページに追加
});

入力欄の値を読むには .value を使います。フォームと組み合わせる典型形です。

const input = document.querySelector("#name");
const button = document.querySelector("#greet");
button.addEventListener("click", () => {
  const name = input.value;              // 入力された文字を読む
  document.querySelector("#result").textContent = `こんにちは、${name}さん`;
});

この「要素を取る → イベントを登録する → 中身を書き換える」という流れが、ブラウザJavaScript のすべての基本です。React などのフレームワークは、この DOM 操作を人の代わりに効率よくやってくれる道具だと考えると理解しやすくなります。

やってみよう

手元に HTML ファイルを作り、<script> タグの中に上のコードを書いてブラウザで開くと、実際にボタンやリストが動きます。textContent を innerHTML に変えたり、click を input（入力のたび）に変えて挙動の違いを試してみましょう。