お問い合わせ
お問い合わせ
ホーム > JavaScript > DOM操作の基本｜要素取得・イベント・クラス操作を体験

DOM操作の基本｜要素取得・イベント・クラス操作を体験

JavaScript
DOM操作の基本を象徴する、JavaScriptコードとWebページ要素を組み合わせたシンプルなイメージ
要素取得・イベント・クラス操作といったDOM操作の基礎を表現したアイキャッチ画像

Webページでは、ユーザーの操作に応じて表示内容が変化したり、アニメーションが実行されたりします。こうした動きを実現する仕組みが DOM（Document Object Model）操作 です。DOMを理解すると、JavaScriptでHTML要素を自由に取得・変更できるようになり、動的なWebページを構築しやすくなります。

本記事では、DOM操作の基礎として

  • 要素取得
  • イベント
  • クラス操作

の3つに焦点を当てて、実際のコード例とともに解説します。

なお、ページ構造を整えるCSSの基礎については、関連知識として 「CSSリセットの基本」 や 「FlexboxとGridの基礎」 もあわせて参考にすると理解が深まります。

1. DOMとは何か

DOM（Document Object Model）は、HTML文書をツリー構造として扱えるようにした仕組みです。
ブラウザはHTMLを読み込み、見出し・段落・画像といったそれぞれの要素を「ノード」として管理します。

JavaScriptでは、このノードを取得し、内容を書き換えたりスタイルを変えたりしてページを動的に変化させられます。

2. 要素を取得する基本的な方法

DOM操作の第一歩は、目的の要素を取得することです。よく使われるメソッドは以下の3つです。

● document.getElementById()

IDを指定して要素を1つ取得します。

const title = document.getElementById('main-title');

● document.querySelector()

CSSセレクタで最初の1つを取得します。

const button = document.querySelector('.btn');

● document.querySelectorAll()

CSSセレクタで複数の要素を取得します。

const items = document.querySelectorAll('.list-item');

CSSのセレクタの基礎や指定方法を整理したい場合は、関連ページとして 「CSSでサイズ指定を理解する｜px・em・remの違い」 や 「CSSのmarginとpaddingの違い」 を確認すると、より理解を深められます。

3. イベントを設定する

イベントとは、ユーザーの動作に応じて実行される動きのことです。
たとえばクリック・スクロール・キーボード入力などが該当します。

● addEventListener() を使う

もっとも一般的なイベント設定方法です。

const btn = document.querySelector('.btn');

btn.addEventListener('click', () => {
  console.log('ボタンがクリックされました');
});

イベント名は "click" のほか "mouseenter" や "input" など多くの種類があります。

レスポンシブ対応が必要な場合は、イベントと合わせて 「CSSでメディアクエリを使う方法」 も確認すると便利です。

4. クラスの操作でデザインを切り替える

要素の見た目を変えたいときは、JavaScriptで直接CSSを操作するのではなく クラスを付け替える のが一般的です。

● classList を使う方法

const box = document.querySelector('.box');

// クラスを追加
box.classList.add('active');

// クラスを削除
box.classList.remove('active');

// トグル（ON/OFF）
box.classList.toggle('active');

この方法により、CSS側で .active にスタイルを定義しておけば、JavaScriptではクラスの切り替えだけで表示を変えられます。

例：

.box.active {
  background-color: skyblue;
}

CSSが反映されない場合の確認ポイントについては 「CSSが反映されないときの原因と対処法まとめ」 で詳しく整理しています。

5. DOM操作の流れをまとめて体験する

以下は、ボタンを押すと要素の色が変わるシンプルな例です。

HTML

<h2 id="title">こんにちは</h2>
<button id="color-btn">色を変える</button>

CSS

.change-color {
  color: red;
}

JavaScript

const title = document.getElementById('title');
const btn = document.getElementById('color-btn');

btn.addEventListener('click', () => {
  title.classList.toggle('change-color');
});

このように、

  1. 要素を取得し
  2. イベントを設定し
  3. クラスを操作する

という3ステップを理解すれば、シンプルなインタラクションはすぐに実装できます。

6. DOM操作を学ぶ際のポイント

  • HTMLとCSSの構造を整理しておくと、要素取得やクラス操作がスムーズになります
  • JavaScriptのエラーはブラウザの開発者ツールで確認できます
  • 動作しない場合は、スクリプトの読み込み位置（</body> 直前推奨）もチェックすると理解が進みます

JavaScriptを扱う際に役立つ基礎知識として、WordPressやテーマ編集の安全な作業方法を解説した 「functions.php の編集方法（初心者向け）」 なども参考になります。

まとめ

DOM操作は、Webページに動きを付けるための基本的な技術です。

  • 要素取得
  • イベント設定
  • クラス操作

の3つを理解すると、さまざまなUIを実装しやすくなります。
まずは小さなサンプルから試し、少しずつ動的なページづくりに慣れていくと理解が自然に進みます。