本文へスキップ
スキルアップカレッジ

DOM操作——JavaScriptでHTMLを書き換える

レッスン6：DOM操作——JavaScriptでHTMLを書き換える

このレッスンで学ぶこと

  • DOMとは何か、JavaScriptがHTMLとどうつながるかを理解する
  • querySelectorで要素を取得できる
  • textContent・innerHTML・valueで中身を読み書きできる
  • styleとclassListで装飾を動的に変えられる
  • HTML上の表示が実際に変化する体験をする

レッスン5までで、JavaScriptという言語そのものを学んできました。変数、条件分岐、繰り返し、関数、配列、オブジェクト——これらは料理でいえば「食材と調理道具」です。このレッスンからは、いよいよこれらをHTMLと結びつけて、ブラウザの画面そのものを動かす番です。その入り口となるのが「DOM操作」です。

DOMとは

DOMは Document Object Model の略で、日本語では「文書オブジェクトモデル」と訳されます。簡単に言うと、ブラウザがHTMLを読み込んだあと、JavaScriptから操作できる形に変換した「HTMLの内部表現」のことです。

ブラウザがHTMLを読み込むと、各タグはオブジェクトとして再構築され、入れ子の階層構造（ツリー構造）になります。このツリーがDOMです。

flowchart TD
    html[html] --> head[head]
    html --> body[body]
    head --> meta[meta]
    head --> title[title]
    head --> link[link]
    body --> nav[nav]
    body --> main[main]
    body --> footer[footer]
    main --> h1[h1]
    main --> p[p]

JavaScriptは、このDOMの中の要素を取得したり、書き換えたり、追加・削除したりできます。これによって、HTMLそのものを動的に変えられます。

💡 ポイント 「JavaScriptでページを動かす」とは、つまり「JavaScriptでDOMを操作する」ということです。ボタンを押したら数字が変わる、入力した内容がそのまま表示される——これらはすべてDOM操作で実現します。

ステップ1：実習用のHTMLを準備する

これからの実習で使うため、my-website フォルダの index.html の <main> タグの中に、次のHTMLを追加してください。場所は <h1> の少し下、自己紹介の段落の前あたりがよいでしょう。

<section class="js-demo">
  <h2>JavaScriptデモ</h2>
  <p id="message">ここに変化する文字が表示されます。</p>
  <p class="counter-display">クリック数：<span id="count">0</span></p>
  <button id="changeButton">テキストを変更</button>
  <button id="incrementButton">カウンター追加</button>
</section>

<section> で囲み、見出し・段落・ボタンを並べたデモ用の領域です。

assets/css/style.css の最後に、見栄え用のスタイルも追加しておきます。

.js-demo {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 40px;
}

.js-demo button {
  background-color: #2c3e50;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
}

.js-demo .highlight {
  background-color: #fff3cd;
  padding: 4px 8px;
}

保存してブラウザで再読み込みすると、ボタンが2つ並んだデモ用の領域が表示されます。今はボタンを押しても何も起きませんが、このレッスンと次のレッスンでJavaScriptを書き加えていきます。

querySelector——要素を取得する

DOMの中から特定の要素を見つけるには、document.querySelector を使います。

const message = document.querySelector("#message");
console.log(message);

#message はCSSのIDセレクタと同じ書き方です。document は「ページ全体」を指す特別なオブジェクトで、その中から条件に合う要素を探します。

querySelector には、CSSのセレクタとほぼ同じ書き方が使えます。

document.querySelector("h1");           // 最初のh1
document.querySelector(".card");        // 最初のクラスがcardの要素
document.querySelector("#count");       // idがcountの要素
document.querySelector(".card h3");     // .cardの中のh3

該当する要素がない場合は null が返ります。

💡 ポイント querySelector は「最初に一致した要素」を1つだけ返します。複数の要素を一度に取得したい場合は querySelectorAll を使うと、全要素を集めた配列のような構造（NodeList）が返ります。

ステップ2：要素を取得して中身を読む

main.js を、これまでの内容を残しつつ整理し、最後に次のコードを追加してください。

const message = document.querySelector("#message");
console.log(message.textContent);

保存してブラウザを再読み込みすると、コンソールに「ここに変化する文字が表示されます。」と表示されます。

textContent は、要素の中の文字列を取得・設定するためのプロパティです。読み取りはもちろん、代入もできます。

textContent——テキストを書き換える

textContent に値を代入すると、HTMLの中身が書き換わります。

const message = document.querySelector("#message");
message.textContent = "JavaScriptで書き換えました！";

これを main.js に追加して保存し、ブラウザを再読み込みすると、<p id="message"> の中の文字が「JavaScriptで書き換えました！」に変わります。HTMLファイル自体は書き換えていないのに、ブラウザでの表示だけが変わっています。これがDOM操作の力です。

🔰 初学者の方へ 「JavaScriptを書いただけでHTMLが変わった」と感じるかもしれませんが、HTMLファイルそのものは変わっていません。ブラウザがメモリ上で持っているDOMだけが書き換わっています。再読み込みすると、また元のHTMLが読み込まれて、JavaScriptが再度実行されて書き換わる、というサイクルです。

innerHTML——HTMLとして書き換える

innerHTML は textContent に似ていますが、HTMLタグを含む文字列を渡せる点が異なります。

const message = document.querySelector("#message");
message.innerHTML = "<strong>太字で表示</strong>します";

これを実行すると、「太字で表示」の部分が太字になって表示されます。タグごと書き換えたいときは innerHTML を使います。

⚠️ 注意 innerHTML には、入力欄に書かれた値や外部データなど、信頼できないデータを直接入れてはいけません。悪意のあるHTMLやJavaScriptが埋め込まれてしまう「XSS（クロスサイトスクリプティング）」というセキュリティリスクの原因になります。確実に自分で作った安全な文字列以外は、textContent を使うのが安全です。

value——フォームの入力値を扱う

<input> や <textarea> などのフォーム要素の値は、textContent では取得できません。代わりに value プロパティを使います。レッスン7のイベント処理で扱いますが、ここで覚えておきましょう。

const input = document.querySelector("#username");
console.log(input.value);    // 入力されている値
input.value = "デフォルト";  // 値を設定

style——スタイルを動的に変える

要素の style プロパティを使うと、CSSのプロパティを直接設定できます。

const message = document.querySelector("#message");
message.style.color = "red";
message.style.fontSize = "20px";

CSSでは font-size のようにハイフンで書きますが、JavaScriptの style プロパティでは fontSize のようにキャメルケースで書きます（CSSのハイフンが取れて、次の単語の頭が大文字になる規則）。

💡 ポイント style で直接スタイルを変える方法は、その場限りの細かい調整には便利ですが、見た目を大きく変えるときには次の classList を使うほうが整理しやすくおすすめです。

classList——クラスの追加・削除でスタイルを切り替える

実務では、CSSにクラス単位でスタイルをまとめておき、JavaScriptはそのクラスを付け外しするだけ、という設計がよく使われます。これを実現するのが classList プロパティです。

classList には主要なメソッドが3つあります。

メソッド 役割
add("クラス名") クラスを追加する
remove("クラス名") クラスを削除する
toggle("クラス名") あったら削除、なかったら追加 
const message = document.querySelector("#message");
message.classList.add("highlight");
// もう一度実行すると追加されたまま（重複しない）

message.classList.remove("highlight");

message.classList.toggle("highlight"); // ON↔OFFを切り替える

CSSの方には、highlight クラスのスタイルを書いておきます（先ほど追加済み：.js-demo .highlight { background-color: #fff3cd; padding: 4px 8px; }）。

これで、add("highlight") で背景に色が付き、remove("highlight") で外れる、というスタイル切り替えがJavaScriptから実現できます。

💡 ポイント style で直接書くか、classList でクラスを切り替えるか。ルールはシンプルで、「装飾の組み合わせをCSSにまとめておき、JSはオン・オフだけ」というスタイルが現代的です。CSSとJavaScriptの責務がわかれて、コードが読みやすくなります。

実習：HTMLの中身をJavaScriptで変える

ここまでの内容を組み合わせた実習です。main.js の最後に次のコードを追加してください（既存の自己紹介などのコンソール出力は残してOKです）。

// 1. メッセージ要素を取得
const message = document.querySelector("#message");

// 2. テキストを書き換える
message.textContent = "JavaScriptでHTMLを書き換えました！";

// 3. ハイライトクラスを追加してスタイルを変える
message.classList.add("highlight");

// 4. カウンター表示を取得して、初期値を50に書き換えてみる
const count = document.querySelector("#count");
count.textContent = "50";

// 5. h1の文字色を変える（style操作の例）
const heading = document.querySelector("h1");
heading.style.color = "#2980b9";

保存してブラウザを再読み込みすると、次のような変化が起きます。

  • <p id="message"> の中身が新しいテキストに変わり、背景がハイライトされる
  • カウンター表示が「クリック数：50」になる
  • <h1> の文字色が青系統になる

ブラウザの画面そのものがJavaScriptで動いた、最初の瞬間です。

💡 ポイント このレッスンの段階では、ページが読み込まれた瞬間にだけ変化が起きる「一発の書き換え」です。次のレッスン7で「ボタンを押したときに変化させる」イベント処理を学ぶと、利用者の操作で動的にページが変わる本当の意味でのインタラクションが完成します。

開発者ツールでDOMを確認する

ブラウザの開発者ツールには、コンソールのほかに「Elements」または「要素」というタブがあります。ここではDOMの今の状態が表示されます。

JavaScriptで要素のtextContentを書き換えた後、Elementsタブを見ると、書き換えた後の状態が反映されているのが確認できます。HTMLファイル自体は変わっていませんが、ブラウザが持っているDOMが変わっていることが視覚的にわかります。

🔰 初学者の方へ 「JavaScriptが思ったとおりに動かない」というとき、Elements タブで「いま要素の中身が何になっているか」を確認するのは強力なデバッグ手段です。コンソールでエラーを確認しつつ、Elementsで現状を確認する、を癖にしていきましょう。

まとめ

このレッスンでは、以下のことを学びました。

  • DOMはブラウザがHTMLを読み込んで作る、JavaScriptから操作できる構造
  • document.querySelector でCSSセレクタの書き方で要素を取得できる
  • textContent で文字を、innerHTML でHTMLを、value で入力値を読み書きできる
  • style.プロパティ名 で直接スタイルを変えられる（プロパティはキャメルケース）
  • classList.add / remove / toggle でクラスを操作してスタイルを切り替えるのが定番
  • innerHTML には信頼できない値を入れない（XSS対策）

次のレッスンでは「イベント処理」を学びます。利用者がボタンをクリックしたとき、入力欄に文字を打ったとき、フォームを送信したとき——こうした操作に反応してDOMを変える方法です。これでようやく「動的なWebページ」の核心が完成します。

確認クイズ

このレッスンの理解度をチェックしましょう。