JavaScriptで要素を取得する方法（getElementById, querySelectorなど）

先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptでウェブページの特定の部分を操作したいんですけど、どうやってその部分を指定すればいいんですか？」

先生

「それは、JavaScriptで要素を取得するという作業が必要です。HTMLの要素をJavaScriptで取得すれば、その要素を自由に操作できるようになりますよ。」

生徒

「要素を取得する方法っていくつかあるんですか？」

先生

「はい、いくつか方法があります。それぞれの特徴を理解して、状況に応じて使い分けることが大切です。それでは、代表的な要素取得の方法を一緒に学んでいきましょう！」

要素を取得するとは？

要素を取得するとは？" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

要素を取得するとは？

JavaScriptで要素を取得するとは、HTMLで書かれたタグ（要素）をJavaScriptのコードで扱えるようにすることです。

例えば、ウェブページに表示されているボタンや見出し、段落などを、JavaScriptから操作したいときに、まずその要素を取得する必要があります。要素を取得してから、テキストを変更したり、色を変えたり、クリックされたときの動作を設定したりできるようになります。

身近な例えで理解しよう

要素の取得は、「図書館で本を探す」作業に似ています。

図書館の本棚にある本＝HTMLの要素
本のタイトルや背番号＝要素のIDやクラス名
本を探して手に取る＝JavaScriptで要素を取得する
本の内容を読んだり書き込んだりする＝取得した要素を操作する

つまり、操作したい要素をまず見つけ出す必要があるということです。

getElementById() - IDで要素を取得する

getElementById() - IDで要素を取得する" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

getElementById() - IDで要素を取得する

getElementById()は、ID属性を使って要素を取得するメソッドです。最も基本的で、よく使われる方法の一つです。

基本的な使い方


<!DOCTYPE html>
<html>
<head>
    <title>getElementById の例</title>
</head>
<body>
    <h1 id="mainTitle">こんにちは</h1>
    <p id="message">これはメッセージです。</p>
    
    <script>
        // ID が "mainTitle" の要素を取得
        const title = document.getElementById('mainTitle');
        console.log(title.textContent);
        
        // ID が "message" の要素を取得
        const msg = document.getElementById('message');
        console.log(msg.textContent);
    </script>
</body>
</html>

実行結果


こんにちは
これはメッセージです。

重要なポイント

document.getElementById()の引数には、ID名だけを指定します（#マークは不要）
IDは一つのページ内で一意（ユニーク）でなければなりません。同じIDを複数の要素に付けてはいけません
指定したIDの要素が存在しない場合、nullが返されます
取得できるのは一つの要素だけです

補足：「メソッド」とは、オブジェクトが持っている機能（関数）のことです。getElementById()は、documentオブジェクトが持っているメソッドです。

querySelector() - CSSセレクタで要素を取得する

querySelector() - CSSセレクタで要素を取得する" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

querySelector() - CSSセレクタで要素を取得する

querySelector()は、CSSセレクタを使って要素を取得するメソッドです。非常に柔軟で強力な方法として、現在では広く使われています。

基本的な使い方


<!DOCTYPE html>
<html>
<head>
    <title>querySelector の例</title>
</head>
<body>
    <h1 id="title">タイトル</h1>
    <p class="description">説明文です。</p>
    <button>クリック</button>
    
    <script>
        // IDで取得（#を付ける）
        const title = document.querySelector('#title');
        console.log(title.textContent);
        
        // クラス名で取得（.を付ける）
        const desc = document.querySelector('.description');
        console.log(desc.textContent);
        
        // タグ名で取得
        const btn = document.querySelector('button');
        console.log(btn.textContent);
    </script>
</body>
</html>

実行結果


タイトル
説明文です。
クリック

重要なポイント

CSSと同じセレクタの書き方が使えます（IDには#、クラスには.を付ける）
条件に一致する要素が複数ある場合、最初に見つかった一つだけが返されます
要素が見つからない場合はnullが返されます
getElementById()よりも柔軟な検索ができます

querySelectorAll() - 複数の要素を取得する

querySelectorAll() - 複数の要素を取得する" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

querySelectorAll() - 複数の要素を取得する

querySelectorAll()は、条件に一致する全ての要素を取得するメソッドです。querySelector()が一つだけ返すのに対し、こちらは全ての要素をリストとして返します。

基本的な使い方


<!DOCTYPE html>
<html>
<head>
    <title>querySelectorAll の例</title>
</head>
<body>
    <p class="item">項目1</p>
    <p class="item">項目2</p>
    <p class="item">項目3</p>
    
    <script>
        // class="item" の要素を全て取得
        const items = document.querySelectorAll('.item');
        
        console.log('取得した要素の数:', items.length);
        
        // 各要素のテキストを表示
        items.forEach(function(item, index) {
            console.log('要素' + index + ':', item.textContent);
        });
    </script>
</body>
</html>

実行結果


取得した要素の数: 3
要素0: 項目1
要素1: 項目2
要素2: 項目3

重要なポイント

戻り値はNodeListというリスト形式のオブジェクトです
配列のようにforEach()などのメソッドが使えます
要素が一つも見つからない場合は、空のNodeListが返されます（nullではない）
lengthプロパティで取得した要素の数を確認できます

注意：NodeListは配列に似ていますが、完全な配列ではありません。一部の配列メソッドは使えない場合があります。

getElementsByClassName() - クラス名で要素を取得する

getElementsByClassName() - クラス名で要素を取得する" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

getElementsByClassName() - クラス名で要素を取得する

getElementsByClassName()は、指定したクラス名を持つ全ての要素を取得するメソッドです。


<!DOCTYPE html>
<html>
<head>
    <title>getElementsByClassName の例</title>
</head>
<body>
    <div class="box">ボックス1</div>
    <div class="box">ボックス2</div>
    <div class="box">ボックス3</div>
    
    <script>
        // class="box" の要素を全て取得
        const boxes = document.getElementsByClassName('box');
        
        console.log('ボックスの数:', boxes.length);
        
        // 各要素にアクセス
        for (let i = 0; i < boxes.length; i++) {
            console.log(boxes[i].textContent);
        }
    </script>
</body>
</html>

実行結果


ボックスの数: 3
ボックス1
ボックス2
ボックス3

重要なポイント

クラス名を指定するときは、ドット（.）を付けません
戻り値はHTMLCollectionというリスト形式のオブジェクトです
HTMLCollectionはforEach()が使えないため、forループで処理します
最近ではquerySelectorAll()を使う方が一般的です

getElementsByTagName() - タグ名で要素を取得する

getElementsByTagName() - タグ名で要素を取得する" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

getElementsByTagName() - タグ名で要素を取得する

getElementsByTagName()は、指定したタグ名の全ての要素を取得するメソッドです。


<!DOCTYPE html>
<html>
<head>
    <title>getElementsByTagName の例</title>
</head>
<body>
    <p>段落1</p>
    <p>段落2</p>
    <div>ディビジョン</div>
    
    <script>
        // 全てのp要素を取得
        const paragraphs = document.getElementsByTagName('p');
        
        console.log('p要素の数:', paragraphs.length);
        
        for (let i = 0; i < paragraphs.length; i++) {
            console.log(paragraphs[i].textContent);
        }
    </script>
</body>
</html>

実行結果


p要素の数: 2
段落1
段落2

各メソッドの比較と使い分け

各メソッドの比較と使い分け" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

各メソッドの比較と使い分け

それぞれのメソッドには特徴があります。状況に応じて適切なメソッドを選びましょう。

メソッド	取得方法	戻り値
`getElementById()`	ID属性	要素1つ
`querySelector()`	CSSセレクタ	要素1つ
`querySelectorAll()`	CSSセレクタ	NodeList
`getElementsByClassName()`	クラス名	HTMLCollection
`getElementsByTagName()`	タグ名	HTMLCollection

使い分けの目安

ID属性がある要素：getElementById()またはquerySelector('#id')
複雑な条件で検索したい：querySelector()またはquerySelectorAll()
複数の要素を処理したい：querySelectorAll()
シンプルにID取得だけ：getElementById()が高速

より複雑なセレクタの使い方

より複雑なセレクタの使い方" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

より複雑なセレクタの使い方

querySelector()とquerySelectorAll()では、CSSセレクタの知識を活用して、より詳細な検索ができます。


// 子孫セレクタ：div要素の中にあるp要素
const p = document.querySelector('div p');

// 子セレクタ：div要素の直接の子要素であるp要素
const directChild = document.querySelector('div > p');

// 属性セレクタ：type属性が"text"のinput要素
const textInput = document.querySelector('input[type="text"]');

// 複数クラス：class="box"とclass="active"の両方を持つ要素
const activeBox = document.querySelector('.box.active');

// 疑似クラス：最初のli要素
const firstItem = document.querySelector('li:first-child');

このように、CSSセレクタの知識があれば、非常に柔軟な要素の取得が可能になります。

要素が取得できなかった場合の対処

要素が取得できなかった場合の対処" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

要素が取得できなかった場合の対処

指定した条件に一致する要素がない場合、エラーを防ぐために確認処理を入れることが重要です。


// 要素の取得を試みる
const element = document.getElementById('myElement');

// 要素が取得できたか確認
if (element) {
    // 要素が存在する場合の処理
    element.textContent = '変更しました';
    console.log('要素を変更しました');
} else {
    // 要素が存在しない場合の処理
    console.log('要素が見つかりませんでした');
}

このようにif文で確認することで、要素が存在しない場合のエラーを防ぐことができます。プログラムが途中で止まってしまうことを防ぐため、特に重要な処理です。

よくあるエラー：要素が存在しないのに操作しようとすると「Cannot read property 'textContent' of null」といったエラーが発生します。必ず存在確認をしましょう。

現役テックリードが直接指導【JavaScript実践実践セミナー】

Vanilla JSから始めるモダンJavaScript実践講座｜ES6+とDOM操作の完全理解

累計120万PV超の専門メディアが監修。商用フロントエンド開発の「設計の型」を最短習得。

ブラウザを操る。モダンJavaScript（ES6+）の基礎とDOM操作の真髄。

本講座では、ReactやVue.jsといったフレームワークの土台となるJavaScriptの本質を学びます。ライブラリに頼らず、ブラウザ上で何が起きているのかを理解することで、デバッグ能力と実装スピードを劇的に向上させます。最新のES6以降のモダン記法や、実務で必須となるイベント駆動設計を60分で濃縮体験します。