基本知識

【JS第7回】DOM操作：HTML要素を書き換える

JavaScript基礎講座 全10回（第7回）

【JS第7回】DOM操作：HTML要素を書き換える

JavaScriptを使ってHTMLをプログラムから書き換え、Webページに魔法の動きを与えます。要素を狙い撃ちで取得するquerySelectorと、中身の文字やデザインを動的に変更する基本メソッドをマスターしましょう。

📌 JavaScript講座ロードマップ一覧（クリックで移動）

1. DOM（ドム）の仕組みとDOMツリー

JavaScriptはただの計算用言語ではなく、ブラウザ上の表示画面を動的に操作するために、DOM（Document Object Model） という仕組みを利用しています。

DOMとは、ブラウザがHTMLファイルを読み込んだ際に、HTMLタグをJavaScriptから操作可能な「オブジェクト（プログラムの部品）」のツリー構造へと変換したものです。この木のような階層構造を「DOMツリー」と呼び、頂点にある `document` というオブジェクトから全ての要素へアクセスします。

2. 要素を狙い撃ちする document.querySelector

JavaScriptからHTMLを操作するためには、まず最初に「操作対象の要素」をDOMツリーから見つけ出さなければなりません。このターゲット探索に用いられる最も強力なメソッドが `document.querySelector()` です。

💡 CSSセレクタと全く同じ指定方法

括弧の中に、CSSでスタイルを指定する時と同じルールで文字列を渡します。
・タグ名で取得する場合 ➔ document.querySelector("p")
・クラス名で取得する場合 ➔ document.querySelector(".text-red")
・ID名で取得する場合 ➔ document.querySelector("#header")

3. 要素のテキストやCSSスタイルを動的に書き換える

取得した要素に対して、中身を書き換えるための主要な手段は以下の通りです。

  • textContent: 要素の「中身のテキスト」を上書きします。HTMLのタグを含まない純粋な文字列の書き換えに使用します。
  • innerHTML: 要素の「中身のHTML構造」を書き換えます。新しいHTMLタグを追加したい場合に重宝しますが、セキュリティ上の配慮（XSS対策）が必要なため、単なる文字変更の時はtextContentを優先します。
  • style属性への直接変更: element.style.color = "blue"; のようにして、インラインスタイルをプログラムから瞬時に変更します。

4. 実際にHTMLの文字とデザインを書き換える

以下のコードを記述すると、ID「my-title」を持つ見出しタグをJavaScriptが自動で検知し、タイトル文字を変更した上で、文字色をエメラルドグリーンへ変更します。

script.js 
/* 1. IDが my-title の要素を取得する */
const titleElement = document.querySelector("#my-title");

/* 2. 中身のテキストを変更する */
titleElement.textContent = "JavaScriptで変更されたタイトル";

/* 3. CSSスタイルを書き換え（文字色と文字サイズを変更） */
titleElement.style.color = "#10b981";
titleElement.style.fontSize = "28px"; /* CSSの font-size はキャメルケース（fontSize）にします */

⚠️ スタイル指定のキャメルケース規則

JavaScriptからスタイルを変更する場合、CSSの `font-size` や `background-color` のようなハイフン繋ぎのプロパティは、ハイフンを取り除き後ろの頭文字を大文字にする**「キャメルケース（fontSize, backgroundColor）」**で記述しなければならないというルールがあります。

✍️ 第7回 理解度チェック（問題）

HTML内の特定のクラス（例: .my-text）を持つ最初の要素を取得するために使用する、CSSと同じセレクタ文字を指定するdocumentオブジェクトのメソッド名は何でしょうか？

※この問題の解答と解説 is ページ最下部（まとめの前）に掲載しています。

5. まとめと次回予告

第7回の講義はお疲れ様でした！今回の重要ポイントを振り返りましょう。

  • DOMはHTMLをオブジェクトの木構造としてJavaScriptから操作する橋渡しメカニズム。
  • `document.querySelector()` を用い、CSSセレクタと同じ記述で任意の要素を取得できる。
  • テキストの書き換えには `textContent`、CSSスタイルの変更には `style.プロパティ` を用いる。

次回（第8回）は、ユーザーの「クリック」などの動きを検知してプログラムを走らせる「イベントリスナーとクリック処理」を学び、いよいよウェブサイトらしいインタラクティブ性を実装します。お楽しみに！

📖 JavaScriptの基礎を全10回でマスターする

🔑 第7回 理解度チェックの解答と解説

【解説】

正解は **`querySelector`** （または `document.querySelector`）です。 `document.querySelector(“.my-text”)` のように、丸括弧の中にCSSでおなじみのクラス指定子 `.` や ID指定子 `#` を含んだセレクタ文字列を渡すことで、該当する最初の要素のオブジェクトを参照します。以前の `getElementById` 等と違い、これ1つであらゆるセレクタに対応できるモダンな標準機能です。

関連記事