JavaScriptのquerySelectorを解説！idやタグ指定して要素を取得する方法は？

2024-04-30

当サイトでは一部リンクに広告が含まれています

フロントエンド開発において、JavaScriptは欠かせない存在です。中でも、「querySelector」は非常に便利なメソッドで、CSSセレクタを使ってHTML要素を簡単に取得できます。

本記事では、初心者向けにquerySelectorの使い方を詳しく解説します。基本的な構文から、様々なセレクタの指定方法、注意点まで丁寧に説明していくので、ぜひ最後までご覧ください。

querySelectorとは何か知りたい
querySelectorの基本的な使い方を理解したい
CSSセレクタで要素を柔軟に指定したい

上記のような方は、ぜひこの記事を参考にしてみてください。

querySelectorをマスターすれば、JavaScriptでのDOM操作が格段に楽になるはずです！

この記事を書いた人

未経験からWebエンジニアとして転職成功（年収 30% アップ）
現役のフルスタックエンジニアとして活躍中
開発チームリーダーとして複数プロジェクトをリード
副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ

querySelectorの基本的な使い方

querySelectorは、Document、DocumentFragment、Elementの各インターフェースに定義されているメソッドで、指定したCSSセレクタに一致する最初の要素を取得します。

使い方は非常にシンプルで、以下のように記述します。

let element = document.querySelector(selectors);

selectorsの部分に取得したい要素のCSSセレクタを記述します。例えば、以下のようなHTMLがあったとします。

<p class="text">これはpタグです。</p>
<p id="title">タイトル</p>

この場合、クラス名がtextのp要素を取得するには次のように記述します。

let element = document.querySelector('.text');

同様に、id名がtitleの要素を取得するなら、以下のようになります。

let element = document.querySelector('#title');

戻り値のelementには、指定したセレクタに一致した最初の要素への参照が格納されます。一致する要素がない場合はnullが返ります。

querySelectorAllで複数要素を取得

querySelectorは名前の通り、セレクタに一致した最初の1つの要素しか取得できません。複数の要素を一括で取得したい場合は、querySelectorAllメソッドを使います。

let elements = document.querySelectorAll(selectors);

querySelectorAllの戻り値であるelementsは、一致した要素のリストを表すNodeListオブジェクトです。

例えば、先ほどのHTMLで全てのpタグを取得するには以下のようにします。

let elements = document.querySelectorAll('p');
console.log(elements.length); // 2
console.log(elements[0].textContent); // これはpタグです。

NodeListオブジェクトは配列に似ていて、以下のような特徴があります。

lengthプロパティで要素数を取得できる
elements[0]のようにインデックスを指定して個々の要素にアクセスできる

さまざまなCSSセレクタの指定方法

querySelectorとquerySelectorAllでは、CSSセレクタを使って柔軟に要素を指定できます。ここでは代表的なセレクタの使い方をいくつか紹介します。

タグ名で指定

特定のHTMLタグ名を持つ要素を取得します。

// すべてのdiv要素を取得
document.querySelectorAll('div');

idで指定

セレクタの先頭に「#」をつけ、その後にid名を指定します。

// id名が「title」の要素を取得
document.querySelector('#title');

クラス名で指定

セレクタの先頭に「.」をつけ、その後にクラス名を指定します。

// クラス名が「text」の要素をすべて取得
document.querySelectorAll('.text');

属性で指定

属性名と属性値を「[]」で囲んで指定します。完全一致以外にも部分一致などの指定方法があります。

// type属性が「text」のinput要素をすべて取得
document.querySelectorAll('input[type="text"]');
// name属性が「example」で始まる要素をすべて取得
document.querySelectorAll('[name^="example"]');
// src属性が「.png」で終わる要素をすべて取得
document.querySelectorAll('[src$=".png"]');
// class属性に「sample」を含む要素をすべて取得
document.querySelectorAll('[class~="sample"]');

複数のセレクタを組み合わせる

カンマ「,」で区切ることで複数のセレクタを指定できます。また、スペースや「>」で親子関係を指定できます。

// p要素とdiv要素をすべて取得
document.querySelectorAll('p, div');
// div要素の子孫要素でクラス名が「example」の要素をすべて取得
document.querySelectorAll('div .example');
// div要素の直下の子要素でクラス名が「example」の要素をすべて取得
document.querySelectorAll('div > .example');