JavaScriptのDOM操作とは？HTMLを書き換える方法と使い方を初心者向けに解説

「ボタンをクリックしたら文字が変わる」
「入力フォームにエラーメッセージを表示させる」
「クリックするたびに新しい要素が追加される」

私たちが普段目にしているモダンなWebサイトの「動き」は、そのほとんどがJavaScriptによる「DOM（ドム）操作」によって実現されています。

JavaScriptの文法を学んだだけでは、まだ「計算機」を作っているような感覚かもしれません。しかし、DOM操作をマスターすれば、あなたの書いたコードが実際のブラウザ画面（HTML）を自由自在に書き換え、ユーザーと対話できるようになります。

DOM操作を使うと、以下のようなことができるようになります。

テキストを書き換える
画像を切り替える
ボタンを押したときの動きを作る
要素を追加・削除する

このように、Webサイトに「動き」をつけるための基本となるのがDOM操作です。

本記事では、DOMの正体から、特定の要素をつかむ方法、そして実際に中身を書き換える手順まで、初心者向けにわかりやすく解説します。

DOM（ドム）とは何か？「ブラウザとJSの通訳」
1. HTMLは「ツリー構造」で管理されている
2. なぜDOMが必要なのか
DOM操作の「3つのステップ」
手順①：要素を取得する（セレクタ）
手順②：HTMLの内容を書き換える
手順③：属性を操作する（setAttribute/getAttribute）
1. 画像を切り替える
2. クラスを付け外しする（classList）
実践！ボタンを押したら文字が変わるプログラム
DOM操作で絶対にやってはいけない注意点
1. スクリプトを書く場所に注意
2. 過剰な直接スタイル変更は避ける
まとめ：DOM操作で制する者がJavaScriptを制する

DOM（ドム）とは何か？「ブラウザとJSの通訳」

まず最初に、「DOM」という言葉の正体を暴きましょう。DOMはDocument Object Model（ドキュメント・オブジェクト・モデル）の略称です。

簡単に言うと、「JavaScriptからHTMLを自由に操るための仕組み（窓口）」のことです。

HTMLは「ツリー構造」で管理されている

ブラウザはHTMLファイルを読み込むと、それを「木（ツリー）」のような構造で解釈します。これを「DOMツリー」と呼びます。

<html>という根っこがあり
その下に<body>や<head>という枝があり
さらにその下に<h1>や<p>という葉がある

JavaScriptはこの「ツリーの枝先」にアクセスして、「この葉っぱの色を赤に変えて！」「この枝に新しい葉っぱを追加して！」と命令を出すのです。

なぜDOMが必要なのか

HTMLファイルそのものは、一度ブラウザに読み込まれたら中身を書き換えることはできません。しかし、JavaScriptがDOMという窓口を通じてブラウザに「今の画面の一部をこう書き換えて」と伝えることで、ページを再読み込みすることなく、リアルタイムで画面を更新できるのです。

DOM操作の「3つのステップ」

DOM操作は、どんなに複雑な動きでも必ず以下の3つの手順で行われます。

要素を取得する（「どの」HTML要素を変えるか決める）
プロパティを変更する（「何を」変えるか決める。文字、色、属性など）
イベントを設定する（「いつ」実行するか決める。クリック時など）

本記事では、まず基本となる「1」と「2」を完璧にマスターしましょう。

手順①：要素を取得する（セレクタ）

JavaScriptでHTMLを操作するには、まず「操作したターゲット」を特定する必要があります。これを「要素の取得」と呼びます。

一番おすすめ：querySelector

現代のJavaScriptで最もよく使われるのが「document.querySelector()」です。CSSセレクタと同じ書き方で要素を指定できるため、非常に直感的です。

// id名で取得（#をつける）
const title = document.querySelector('#main-title');

// class名で取得（.をつける）
const text = document.querySelector('.description');

// タグ名で取得
const header = document.querySelector('h1');

ID名でピンポイント取得：getElementById

特定のIDを持つ要素を一つだけ取得したい場合に、処理速度が非常に速く、昔から愛用されている方法です。

const btn = document.getElementById('submit-btn');

複数の要素をまとめて取得：querySelectorAll

複数の要素（例えば、すべての<li>タグなど）を取得したい場合に使います。

const items = document.querySelectorAll('.list-item');
// itemsには、見つかったすべての要素が「配列のような形」で入ります。

手順②：HTMLの内容を書き換える

ターゲット（要素）を取得できたら、次はいよいよ中身を書き換えてみましょう。

テキストだけを書き換える（textContent）

タグの中にある「文字」だけを安全に書き換えたい時に使います。

const title = document.querySelector('#title');
title.textContent = 'こんにちは、DOM操作の世界へ！';

HTMLタグごと書き換える（innerHTML）

文字だけでなく、中に新しいタグを埋め込みたい時に使います。

const box = document.querySelector('#container');
box.innerHTML = '<strong>太字のメッセージ</strong>を追加しました';

ユーザーが入力した文字をそのままinnerHTMLで表示するとセキュリティリスク（XSS）があるため、基本はtextContentを使うのがおすすめです。

スタイル（CSS）を書き換える（style）

JavaScriptから直接CSSを操作して、見た目を変えることができます。

const box = document.querySelector('.box');
box.style.backgroundColor = 'red';
box.style.color = 'white';
box.style.fontSize = '24px';

CSSではbackground-colorですが、JSではハイフンを使わずbackgroundColor（キャメルケース）で書くルールがあります。

手順③：属性を操作する（setAttribute/getAttribute）

HTMLの「属性（id,class,src,hrefなど）」も自由に変更できます。

画像を切り替える

例えば、画像をクリックしたら別の画像に差し替えるといった処理に使います。

const myImg = document.querySelector('#profile-img');
myImg.setAttribute('src', 'new-image.jpg');

クラスを付け外しする（classList）

これが実務で最もよく使われる「見た目の切り替え」方法です。CSSであたかじめ「.is-active」といったクラスを作っておき、JSでそれを付け外しします。

const menu = document.querySelector('#side-menu');

// クラスを追加する
menu.classList.add('open');

// クラスを削除する
menu.classList.remove('open');

// クラスがあれば削除、なければ追加する（トグル）
menu.classList.toggle('active');

実践！ボタンを押したら文字が変わるプログラム

ここまでの知識を組み合わせて、実際に動くプログラムを書いてみましょう。

【HTML】

<h1 id="greeting">まだ挨拶していません</h1>
<button id="btn">挨拶する</button>

【JavaScript】

// 1. 要素を取得する
const title = document.querySelector('#greeting');
const button = document.querySelector('#btn');

// 2. ボタンをクリックした時の動き（イベント）を作る
button.addEventListener('click', () => {
  // 3. 内容を書き換える
  title.textContent = 'こんにちは！ボタンが押されましたね！';
  title.style.color = 'blue';
});