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

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

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

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

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

この記事を書いた人

• 現役のフルスタックエンジニアとして活躍中
• 開発チームリーダーとして複数プロジェクトをリード
• 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
• プログラミングスクールのカリキュラム執筆経験あり

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オブジェクトは配列に似ていて、以下のような特徴があります。

さまざまな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');

querySelectorの注意点

querySelectorを使う上で知っておくべきいくつかの注意点を説明します。

存在しない要素を指定した場合

指定したセレクタに一致する要素が存在しない場合、querySelectorはnullを返します。querySelectorAllは空のNodeListオブジェクトを返します。

セレクタが無効な場合

無効なCSSセレクタを指定した場合、JavaScriptはSyntaxErrorの例外を投げます。動的にセレクタを組み立てる場合は注意が必要です。

動的に追加された要素は取得できない

querySelectorやquerySelectorAllが呼び出された時点で存在しない要素は取得できません。動的にJavaScriptで要素を追加しても、再度取得し直さない限り、新しい要素はNodeListには含まれません。

まとめ

今回は、JavaScriptでCSSセレクタを使ってHTML要素を取得するquerySelectorとquerySelectorAllメソッドについて解説しました。

これらのメソッドは柔軟にセレクタを指定できるので、古くからあるgetElementByIdやgetElementsByClassNameなどのメソッドと比べて便利な場合が多いです。しかし、慣れないうちはセレクタの書き方を間違えやすいので注意が必要です。

querySelectorを使いこなせるようになると、JavaScriptでのDOM操作がぐっと楽になるはずです。ぜひ実際のプログラミングの中で活用してみてください。

コスパよく JavaScript を学習できる Udemy 講座人気ランキング

ちなみに姉妹サイトの Learning Next では、JavaScript を独学で学べる Udemy 講座の人気ランキングや、各講座の受講生レビューをもとにした分析スコアを公開しています。

「学習にあまりお金をかけたくない…」「スクールに通う時間がない」という方は、こちらを参考に Udemy 講座の学習も検討してはいかがでしょうか？

▶️ UdemyでJavaScriptを学べる講座の人気ランキング – Learning Next

ひとめで良い点・悪い点、さらにおすすめポイントが分かりますので、講座選びで失敗したくない方はぜひ活用してみてください！