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を効率的に身につける勉強法は？

JavaScript には興味があっても、プログラミング学習をはじめたばかりであれば、以下のような疑問を持つかもしれません。

• JavaScript を身に付けてエンジニアになるには何をすればいい？
• 何から勉強すればいいんだろう？
• 効率よく勉強するには？

JavaScriptは学ぶべき内容が非常に多いため、勉強法の選び方を間違うと時間・労力・お金が無駄になってしまいます…。

そのため、こちらの記事を参考に、ご自身に最適な学習方法を選んでみませんか？

Muscle Coding

【初心者向け】JavaScriptの勉強法3選を現役エンジニアが比較・解説！ | Muscle Coding JavaScriptの効果的な学習方法を現役エンジニアが解説！本、動画教材（Udemy）、プログラミングスクールの特徴を比較し、最適な方法を提案します。初心者でも理解しやすい…