JavaScriptでDOMの取得を体験してみよう！

完成イメージ

今回のテーマ

JavaScriptの役割の1つは、ページ内のHTML要素を操作することです。
そのためには最初に「要素をJavaScript側で取得」しなければなりません。

今回は、DOM要素の取得メソッド（getElementById / getElementsByClassName / querySelectorなど）を体験しましょう。

目的

HTMLにある要素をJavaScriptで取得できるようになる
getElementById / getElementsByClassName / querySelector の違いを知る
取得した要素に対して、textContent を使って内容を書き換えられる

作成ファイル・保存場所

js-domフォルダに以下のファイルを作成してください。

ファイル名	内容
js-dom.html	DOM取得テスト用HTML

練習するHTMLは下記からコピーしてください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>DOM取得の練習</title>
</head>

<body>
    <h1 id="main-title">こんにちは</h1>
    <p class="message">このページはテストです</p>
    <p class="message">JavaScriptを学習中です</p>
    <p id="output"></p>

    <script>
        // =======================
        // DOMを取得してみよう
        // =======================


        // =======================
        // DOMの中身を書き換えてみよう
        // =======================


        // =======================
        // for...of で全ての<p>要素に番号をつける
        // =======================


    </script>
</body>

</html>

JavaScriptは <script> タグ内に直接記述してください（内部JS）

チェックポイント

document.getElementById() で、id属性の要素を取得できる
document.getElementsByClassName() で、同じクラス名を持つ複数の要素をまとめて取得できる
document.querySelector() で、CSSセレクタ形式（id, class,タグ名など）で1つ目の要素を取得できる
document.querySelectorAll() で、CSSセレクタに一致する要素をすべてまとめて取得できる
textContent を使って、取得した要素の中身（テキスト）を変更できる

DOM取得メソッドの使い分け

スクロールできます

メソッド名	説明内容	HTML例	返されるもの
`getElementById('main-title')`	指定した id の要素を1つ取得する	`<div id="main-title">こんにちは</div>`	単一の要素（Element）
`getElementsByClassName('message')`	指定したクラス名を持つ要素を「全て」取得する	`<p class="message">テスト</p>`	HTMLCollection（配列風）
`querySelector('.message')`	CSSセレクタ形式で「先頭の1件」を取得	`<p class="message">テスト</p>`	単一の要素（Element）
`querySelectorAll('.message')`	CSSセレクタ形式で一致する「すべての要素」を取得	`<p class="message">テスト</p>`	NodeList（forEach可）

`getElementsByClassName()` と `querySelectorAll()` の使い分け例

両方とも「複数の要素を取得」できます。ただしquerySelectorAll() の方が CSS セレクタが使えて柔軟です。

<div class="box">
  <p class="message">ボックス内</p>
</div>
<p class="message">外側</p>

// NG：getElementsByClassName は全体から取得される
const allMessages = document.getElementsByClassName('message');

// OK：querySelectorAll は範囲指定もできる
const boxMessages = document.querySelectorAll('.box .message');

querySelectorAll() は .box .message というような親子関係を含む指定が可能です

スクロールできます

メソッド名	柔軟なCSSセレクタ	戻り値	主な用途
`getElementsByClassName()`	単一のクラス名のみ	HTMLCollection	単純なクラス名指定
`querySelectorAll()`	親子・複数クラス・属性指定などOK	NodeList	柔軟なセレクタ指定が必要な場合に便利

`textContent` とは？

textContent は、HTML要素の中にある「テキストだけ」を読み取ったり、書き換えたりするための プロパティ です。

const title = document.getElementById('main-title');
title.textContent = 'こんにちは、JavaScript!';

このように書くことで、タグの中身のテキストを変更することができます。

HTML/スクリプトトレーニング

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>DOM取得の練習</title>
</head>

<body>
    <h1 id="main-title">こんにちは</h1>
    <p class="message">このページはテストです</p>
    <p class="message">JavaScriptを学習中です</p>
    <p id="output"></p>

    <script>
        // =======================
        // DOMを取得してみよう
        // =======================

        // 1) idで要素を取得（1つだけ）
        const title = document.getElementById('main-title');
        console.log(title); // <h1 id="main-title">こんにちは</h1>

        // 2) class名で取得（複数あるとHTMLCollectionになる）
        const messages = document.getElementsByClassName('message');
        console.log(messages); // HTMLCollection(2) [p.message, p.message]

        // 3) querySelector（CSSセレクタで1つだけ取得）
        const output = document.querySelector('#output');
        console.log(output); // <p id="output"></p>

        // 4) querySelectorAll（CSSセレクタで全件取得・NodeListになる）
        const paras = document.querySelectorAll('p');
        console.log(paras); // NodeList(3) [p, p, p]

        // =======================
        // DOMの中身を書き換えてみよう
        // =======================

        // h1要素のテキストを書き換える
        title.textContent = 'こんにちは、JavaScript!';

        // class="message" の2つの段落を順番に書き換える
        messages[0].textContent = '最初のメッセージ';
        messages[1].textContent = '2番目のメッセージ';

        // id="output" の段落に出力メッセージを入れる
        output.textContent = 'ここに出力されます';

        // =======================
        // for...of で全ての<p>要素に番号をつける
        // =======================

        // paras は <p> 要素すべてが入った NodeList
        // 1つずつ取り出して、末尾に「段落1」などを追記する
        // += は文字列の場合、追記(追加）となる
        let i = 1;
        for (let p of paras) {
            p.textContent += ` （段落 ${i}）`;
            i++;
        }

    </script>
</body>

</html>

console.log(paras)で確認すると、NodeList という「配列っぽいオブジェクト」が入っていることがわかります。
querySelectorAll() は、該当する要素をすべて取得して「NodeList」という配列のようなオブジェクトを返します。
length で要素の数を調べたり、[0] のようにインデックスでアクセスできます。

ただし map() や push() など、本当の配列でしか使えないメソッドは動きません。 → そのため、まずは for…of を使って1つずつ処理するのがおすすめです。