JS・TS：DOM操作とイベントリスナーの基本

作成日：2025/6/8,最終更新日：2025/6/11

JavaScript / TypeScriptのDOM操作とイベントリスナーの基本について

HTMLとの連携・イベント処理の基本をわかりやすく解説

この記事では、HTMLの要素を操作したり、クリックなどのイベントに反応させたりするための基本的な書き方を紹介します。
実務でも頻繁に登場する「DOMの取得」と「イベントリスナー」の使い方を詳しく解説していきます。

前提知識： DOM（ドム）とは、Document Object Model の略です。
HTMLを「JavaScriptから操作できるようにした構造体」で、ページ内の要素をツリー状に表しています。
つまり、「HTMLの内容を JavaScript から自由に読み取ったり、書き換えたりするための仕組み」です。

1. DOM取得の基本

解説： JavaScriptでHTMLを操作するためには、まず「対象の要素を取得する」ことが必要です。
その中でもよく使われるのが document.querySelector() です。
「HTMLとJavaScriptをつなぐ第一歩」として、使い方をしっかり覚えましょう。

●基本構文と使い方

HTMLに以下のようなボタンがあったとします：

<button id="myBtn">クリックしてね</button>

JavaScriptでこのボタンを取得するには、次のように書きます。

// ボタン要素を取得
const btn = document.querySelector('#myBtn');

// 結果 : ボタン要素が取得される（HTMLButtonElement）
console.log(btn);

●querySelectorの基本ポイント

document：今表示されているHTML全体を指します
querySelector()：CSSセレクタで要素を指定できます
「#」はID、「.」はクラス、他にタグ名なども指定可能です

●複数取得との違い

querySelector() は「最初に見つかった1つ」を返します。
同じクラスの要素をすべて取りたい場合は querySelectorAll() を使います。

// すべての.box要素を取得（NodeListが返る）
const boxes = document.querySelectorAll('.box');

●注意点：nullになることもある

指定した要素が存在しないときは、null が返ります。
また、HTMLの読み込み前にJavaScriptを実行すると、同じく null になります。

// HTML読み込み後に実行するようにする
document.addEventListener('DOMContentLoaded', () => {
  const btn = document.querySelector('#myBtn');
  console.log(btn); // 👉 nullにならない
});

2. イベントを扱う：addEventListenerの基本

解説： HTML要素を取得できるようになったら、次はその要素に「動きをつける」方法を学びましょう。
JavaScriptでは、ユーザーの操作（クリック・入力など）に反応させるために、addEventListener を使います。

●基本構文と使い方

たとえば、ボタンをクリックすると、下のテキストが変化するような動きをつけることができます。

<button id="myBtn">クリックしてね</button>
<p id="result">ここが変わります</p>

JavaScript側のコードは次のようになります：

// 要素を取得
const btn = document.querySelector('#myBtn');
const result = document.querySelector('#result');

// イベントリスナーを追加
btn.addEventListener('click', () => {
  result.textContent = 'クリックされました！';
});

●よく使うイベントの種類

addEventListener は第1引数に「イベントの種類」、第2引数に「反応させる処理（関数）」を指定します。
よく使われるイベントを以下にまとめます：

click：クリックされたとき（最も基本）
dblclick：素早く2回クリックされたとき
mouseover：マウスが上に乗ったとき
mouseout：マウスが外に出たとき
mousedown：マウスボタンが押された瞬間
mouseup：マウスボタンが離された瞬間
keydown：キーボードのキーが押されたとき
keyup：キーが離されたとき
input：フォームに文字が入力されたとき（リアルタイム）
change：値の変更が確定したとき（セレクトボックスなど）
submit：フォームが送信されたとき

●例：背景色を変える

次は、クリックに反応して背景色が変わる例です。実際に試してみましょう。⇒

<button id="bgBtn">背景色を変える</button>

const bgBtn = document.querySelector('#bgBtn');

bgBtn.addEventListener('click', () => {
  document.body.style.backgroundColor = '#f0f8ff';
});

このように、addEventListener を使えばユーザー操作に柔軟に反応させることができます。

実例では、上のコードを少しアレンジして、背景色を毎回ランダムに変えるプログラムにしてみました。

const target = document.querySelector('#event_listener');                 // 背景を変える対象をDOM操作で取得
const bgBtn = document.querySelector('#bgColor');                         // 背景色変更ボタンをDOM操作で取得
const color = ['#f0f8ff', '#e6f7ff', '#f9f5d7', '#e8f5e9', '#fff3e0'];    // 淡い色をいくつか設定
bgBtn.addEventListener('click', () =>{                                    // ボタンがクリックされたときのイベントを設定
  const i = Math.floor(Math.random() * color.length);                     // 色をランダムに選択（インデックスを生成）
  target.style.backgroundColor = color[i];                                // 対象の背景色を変更
});

※color.lengthを使うことで、色の数が変わってもランダム選択が自動対応できます。
　今回だと5色設定されているので、「color.length === 5」となります。

3. フォームとバリデーションの初歩

解説： Webページでは、ユーザーに名前やコメントなどを入力してもらう場面がよくあります。
そのときに必要になるのが「バリデーション（入力チェック）」です。
今回は、未入力チェックや文字数制限など、基本的なフォームバリデーションの方法を紹介します。

●フォームのHTML

ここでは、名前を入力する簡単なフォームを使って、バリデーションの流れを見ていきます。

<form id="myForm">
  <label for="name">名前：</label>
  <input type="text" id="name">
  <button type="submit">送信</button>
  <p id="errorMsg"></p>
</form>

●JavaScriptによるバリデーション

JavaScript側では、次のように「未入力」や「文字数不足」をチェックします。

const form = document.querySelector('#myForm');
const nameInput = document.querySelector('#name');
const errorMsg = document.querySelector('#errorMsg');

form.addEventListener('submit', (e) => {
  e.preventDefault(); // フォームの送信を止める

  const name = nameInput.value.trim(); // 空白を除いた入力値を取得

  if (name === '') {
    errorMsg.textContent = '※名前を入力してください。';
    return;
  }

  if (name.length < 3) {
    errorMsg.textContent = '※3文字以上入力してください。';
    return;
  }

  errorMsg.textContent = '送信完了！（実際には送信処理をここに書きます）';
});

●ポイント

・フォーム送信時には「submit」イベントを使います
・e.preventDefault() を書かないと、ページがリロードされてしまいます
・エラーメッセージを表示するための要素（ここでは <p id="errorMsg">）を用意しておきます
・trim() を使うことで、スペースだけの入力も弾けます

●実際に動かすと、こうなります。

　※背景色などの装飾はCSSで追加しています。上記のコードだけでは適用されません

－－－－－－－－－－－－－－－－－
－－－－－－－－－－－－－－－－－

このように、JavaScriptだけで簡単な入力チェックを行うことができます。
より本格的なフォーム処理では、正規表現によるチェックやサーバーサイドとの連携も加わってきますが、まずはこのような基本から始めましょう。