JavaScriptでWebサイトの部品を「特定」し「操作」する！ 🎯

WEB制作

前回の記事で、ユーザーの操作（イベント）に反応して関数を実行する方法を学びましたね。しかし、その関数の中で「Webサイトのどの部品（DOM要素）を操作するか」を指定できなければ、サイトを動かすことはできません。

Webサイトを自在に操作するためには、まずJavaScriptがHTMLの要素（ボタン、画像、テキストなど）を正確に特定（取得）し、次にその要素の属性（見た目や設定）を操作する必要があります。

今回は、最も重要で頻繁に使う、DOM要素の取得方法と、その属性を変更する基本的なテクニックを徹底的に解説します。

1. 目的の要素を「取得」する3つの方法

HTML要素をJavaScriptで操作する第一歩は、その要素をDOM（Document Object Model）から取得することです。主に以下の3つのメソッドが使われます。

1-1. getElementById()：IDで一つだけ取得 🥇

最もシンプルで、かつ最も高速な取得方法です。HTML内で一意であるID属性を使って要素を特定します。

JavaScript

// HTML: <button id="submit-btn">送信</button>
const button = document.getElementById('submit-btn');
console.log(button); // button要素が取得される

注意点: IDはページ内で重複してはいけません。重複した場合、最初に見つかった要素だけが取得されます。

1-2. getElementsByClassName()：クラス名で複数取得 🏷️

HTML要素に付けられたクラス名を使って、該当するすべての要素を取得します。

JavaScript

// HTML: <div class="item">A</div> <div class="item">B</div>
const items = document.getElementsByClassName('item');
console.log(items.length); // 結果: 2 (要素の数)
// items は配列に似たリスト（HTMLCollection）として取得される

1-3. querySelector() / querySelectorAll()：CSSセレクタで取得 💡

これが現代のJavaScriptで最も汎用的に使われる方法です。CSSのセレクタ（タグ名、.クラス名、#IDなど）を使って要素を指定します。

  • querySelector(): 条件に合う最初の要素を一つだけ取得します。JavaScript// HTML: <div class="container">...</div> const container = document.querySelector('.container');
  • querySelectorAll(): 条件に合うすべての要素を取得します。JavaScript// すべてのリストアイテム（li）を取得 const listItems = document.querySelectorAll('ul li'); // listItems は配列に似たリスト（NodeList）として取得される

推奨: 特別な理由がない限り、querySelectorとquerySelectorAllを使うのが最も柔軟で分かりやすいです。

2. 要素の「属性」と「内容」を操作する

目的の要素を取得したら、その要素の属性や中身を操作してWebサイトを変化させます。

2-1. innerHTML：HTMLの内容を操作

要素の**中身全体（HTMLコードを含む）**を取得・変更します。これは、要素内に新しいHTML要素を挿入する際に非常に頻繁に使われます。

JavaScript

const box = document.getElementById('content-box');

// 中身を新しいHTMLで上書きする
box.innerHTML = '<h2>新しいタイトル</h2><p>更新されました！</p>';

注意点: 外部から取得した文字列をinnerHTMLで挿入するとセキュリティ上のリスク（XSS攻撃）があるため、注意が必要です。

2-2. textContent：テキストの内容を操作

要素の純粋なテキスト内容のみを取得・変更します。HTMLタグは無視されます。

JavaScript

// content-boxの中身が「<h2>...</h2><p>...</p>」だった場合
console.log(box.textContent); // 結果: 新しいタイトル更新されました！ (タグは無視)

2-3. setAttribute()：任意の属性を変更

HTML要素が持つ属性（src, href, classなど）の値を変更します。

JavaScript

const image = document.getElementById('my-image');

// src属性の値を変更する
image.setAttribute('src', 'new-image.jpg');

// class属性を追加・変更する
image.setAttribute('class', 'active large-photo');

3. スタイルとクラスの操作（発展）

CSSのスタイルをJavaScriptで動的に変更する方法です。

styleプロパティでスタイルを変更

個々のCSSプロパティを直接変更できます。CSSのプロパティ名（例: background-color）は、JavaScriptではキャメルケース（backgroundColor）に変換されます。

JavaScript

button.style.backgroundColor = 'red';
button.style.fontSize = '20px';

推奨: スタイルを直接変更するよりも、次で説明するクラスの切り替えを行う方が、CSSとJavaScriptの役割が分かれてコードが整理されます。

classListでクラスを操作（ベストプラクティス）

CSSによる見た目の変更は、classListを使ってクラスの追加・削除で行うのが最も推奨される方法です。

メソッド役割
classList.add('className')クラスを追加する。
classList.remove('className')クラスを削除する。
classList.toggle('className')クラスがあれば削除し、なければ追加する（トグル動作）。

Google スプレッドシートにエクスポート

JavaScript

// .activeというクラスを追加
button.classList.add('active'); 

// .activeクラスがあるかどうかで見た目を切り替える
button.addEventListener('click', () => {
  button.classList.toggle('active');
});

まとめ：DOM操作はWebサイトの心臓部

DOM要素の取得と操作は、Webサイトに機能を持たせる上で欠かせない心臓部です。

  • 取得: querySelectorで要素を特定する。
  • 内容: innerHTMLやtextContentで中身を書き換える。
  • 見た目: classListを使ってCSSのクラスを操作する。

まずは、あなたのWebサイトにある一つの要素を取得し、classList.add('highlight')を試すところから始めてみましょう。この基礎を固めることが、あらゆるインタラクティブな機能実装の土台となります。

タイトルとURLをコピーしました