HTML DOM 要素の選択

Volardev 編集部 April 18, 2026

1. HTML要素の検索

JavaScriptでHTML要素を操作（マニピュレート）したい場合、まずはその要素を見つける必要があります。要素を検索するには、主に以下のようないくつかの方法があります。

id によるHTML要素の検索
タグ名 によるHTML要素の検索
クラス名 によるHTML要素の検索
CSSセレクターによるHTML要素の検索
HTMLオブジェクトコレクション によるHTML要素の検索

2. IDによるHTML要素の検索

DOM内でHTML要素を見つける最も簡単な方法は、要素の id を使用することです。
以下の例では、 id="intro" を持つ要素を検索しています。

例

const element = document.getElementById("intro");

要素が見つかった場合、このメソッドはその要素をオブジェクトとして返します（変数 element に格納されます）。
要素が見つからない場合、 element の中身は null になります。

3. タグ名によるHTML要素の検索

以下の例では、すべての <p> 要素を検索します。

例

const element = document.getElementsByTagName("p");

次の例では、まず id="main" の要素を検索し、次にその "main" の内部にあるすべての <p> 要素を検索します。

例

const x = document.getElementById("main");
const y = x.getElementsByTagName("p");

4. クラス名によるHTML要素の検索

特定のクラス名を持つすべてのHTML要素を検索したい場合は、 getElementsByClassName() を使用します。
以下の例では、 class="intro" を持つすべての要素のリストを返します。

例

const x = document.getElementsByClassName("intro");

5. CSSセレクターによるHTML要素の検索

5.1 querySelector() メソッド

querySelector() は、指定したCSSセレクターに一致する最初の要素を返します。

例

<html>
<body>

<p class="demo"></p>

<script>
// パラグラフ（段落）要素にアクセス
const myPara = document.querySelector(".demo");

// 要素のコンテンツを変更
myPara.innerHTML = "こんにちは、世界！";
</script>

</body>
</html>

5.2 querySelectorAll() メソッド

指定したCSSセレクター（id、クラス名、型、属性、属性値など）に一致するすべてのHTML要素を検索したい場合は、 querySelectorAll() メソッドを使用します。

例

<html>
<body>

<p class="demo">1つ目</p>
<p class="demo">2つ目</p>

<script>
// パラグラフ（段落）要素のリストにアクセス
const myItems = document.querySelectorAll(".demo");

// 最初の要素のコンテンツを変更
myItems[0].innerHTML = "最初";
</script>

</body>
</html>

以下の例では、 class="intro" を持つすべての <p> 要素のリストを返します。

例

const x = document.querySelectorAll("p.intro");

6. よくある間違い

開発初心者が陥りやすいミスがいくつかあります。

getElementById() で "#" を使ってしまう:

誤り: "#demo" （正しくは "demo" です。シャープは不要です）

querySelector() が最初の1つしか返さないことを忘れる:

一致するすべての要素を取得したい場合は、必ず querySelectorAll() を使用してください。

7. HTMLオブジェクトコレクションによるHTML要素の検索

この例では、 id="frm1" を持つフォーム要素を formsコレクション から探し出し、その中にあるすべての要素の値を表示します。

例

// IDが"frm1"のフォームを取得
const x = document.forms["frm1"];
let text = "";

// フォーム内の各要素をループで処理
for (let i = 0; i < x.length; i++) {
  text += x.elements[i].value + "<br>";
}

// 結果を表示用要素に出力
document.getElementById("demo").innerHTML = text;