JavaScriptでHTML要素を取得するときによく使われるのが、querySelector()とquerySelectorAll()です。
どちらもCSSと同じ書き方で取得する要素を指定できるため、id・class・タグ名・name属性など、さまざまな条件に対応できます。
ただし、名前が似ているので「どちらを使えばいいの？」「querySelectorAllでidも取得できるの？」と迷う方もいるのではないでしょうか。
この記事では、querySelector()とquerySelectorAll()の違いから、条件ごとの指定方法まで、サンプルコードを使ってわかりやすく解説します。
この記事で分かることは、次のとおりです。
- querySelectorとquerySelectorAllの違い
- id・class・タグ名を指定する方法
- name属性を指定する方法
- ワイルドカードのように属性値の一部から検索する方法
- 取得した複数の要素をまとめて処理する方法
querySelectorとquerySelectorAllの違い
querySelector()とquerySelectorAll()の大きな違いは、取得する要素の数です。
| メソッド | 取得する要素 | 見つからない場合 |
|---|---|---|
| querySelector() | 条件に一致する最初の1件 | null |
| querySelectorAll() | 条件に一致するすべての要素 | 空のNodeList |
たとえば、同じclassを持つ要素が3つある場合、querySelector()で取得できるのは最初の1つだけです。
querySelectorAll()を使うと、3つすべてをまとめて取得できます。
基本的には、1つだけ取得したい場合はquerySelector()、複数取得したい場合はquerySelectorAll()と覚えておけば問題ありません。
querySelectorの使い方
querySelector()は、指定した条件に一致する最初のHTML要素を取得するメソッドです。
基本の書き方は、次のとおりです。
document.querySelector('CSSセレクター');
CSSセレクターとは、CSSでデザインを適用する要素を指定するときに使う#id名や.class名などの書き方です。
たとえば、sampleClassというclassを持つ最初の要素を取得する場合は、次のように記述します。
const element = document.querySelector('.sampleClass');
console.log(element);
条件に一致する要素がない場合は、nullが返されます。
そのまま文字を変更するなどの処理を続けるとエラーになるため、要素が存在するか分からない場合は、次のように確認してから処理すると安全です。
const element = document.querySelector('.sampleClass');
if (element) {
element.textContent = '文字を変更しました';
}
querySelectorAllの使い方
querySelectorAll()は、指定した条件に一致するすべてのHTML要素を取得するメソッドです。
基本の書き方は、次のとおりです。
document.querySelectorAll('CSSセレクター');
sampleClassというclassを持つ要素をすべて取得してみましょう。
const elements = document.querySelectorAll('.sampleClass');
console.log(elements);
該当する要素が3つある場合は、次のようなNodeListが返されます。
NodeList(3) [div.sampleClass, div.sampleClass, div.sampleClass]
NodeListは、取得した複数の要素をまとめて扱う特殊な配列のようなものです。
forEach()を使えば、取得したすべての要素に同じ処理を行うことができます。
条件に一致する要素が1つもない場合でも、querySelector()のようにnullにはなりません。要素数が0件の空のNodeListが返されます。
id・class・タグ名を指定して要素を取得する
ここからは、次のHTMLを使って条件ごとの取得方法を確認します。
<h1 id="sampleId">サンプルタイトル</h1> <p class="sampleClass">1個目のテキスト</p> <p class="sampleClass">2個目のテキスト</p> <input type="text" name="userName"> <input type="text" name="userName">
id・class・タグ名は、CSSで指定するときと同じ書き方で取得できます。
| 取得する条件 | 指定方法 | サンプル |
| id | #id名 | #sampleId |
| class | .class名 | .sampleClass |
| タグ名 | タグ名 | p |
idを指定して要素を取得する場合は、次のように記述します。
const title = document.querySelector('#sampleId');
console.log(title);
同じidは1つのページ内で重複させないのがHTMLの基本ルールです。そのため、idを指定するときは、最初の1件を取得するquerySelector()を使います。
querySelectorAll()でもidを指定できますが、idはページ内で1つだけ使用するため、基本的にはquerySelector()を使えば問題ありません。
classを指定して最初の1件だけ取得する場合は、次のように記述します。
const firstText = document.querySelector('.sampleClass');
同じclassを持つ要素をすべて取得する場合は、querySelectorAll()を使います。
const textList = document.querySelectorAll('.sampleClass');
タグ名でも指定方法は同じです。
// 最初のp要素を取得
const firstParagraph = document.querySelector('p');
// すべてのp要素を取得
const paragraphs = document.querySelectorAll('p');
querySelectorでname属性を指定して取得する
name属性を指定する場合は、idやclassとは書き方が少し異なります。
角括弧を使い、[name="属性値"]と記述します。
const input = document.querySelector('[name="userName"]');
このコードでは、name="userName"が指定された要素のうち、最初の1件を取得します。
タグ名も一緒に指定すると、取得する要素をさらに絞り込めます。
const input = document.querySelector('input[name="userName"]');
name="userName"を持つすべての要素を取得したい場合は、querySelectorAll()を使います。
const inputs = document.querySelectorAll('[name="userName"]');
console.log(inputs);
同じname属性を持つ要素が2つあれば、2つの要素が入ったNodeListを取得できます。
NodeList(2) [input, input]
ラジオボタンやチェックボックスのように、同じname属性を複数の要素へ指定している場合は、querySelectorAll()が便利です。
たとえば、選択されているラジオボタンだけを取得する場合は、次のように記述できます。
<input type="radio" name="pet" value="dog">犬 <input type="radio" name="pet" value="cat" checked>猫
const checkedPet = document.querySelector('input[name="pet"]:checked');
console.log(checkedPet.value);
実行結果はcatになります。
querySelectorでワイルドカードのように検索する
属性値が完全に一致する要素だけでなく、属性値の一部が一致する要素も取得できます。
属性値の一部を使って検索するときは、*=・^=・$=を使います。
| 書き方 | 検索する条件 |
[属性名*="文字列"] | 指定した文字列を含む |
[属性名^="文字列"] | 指定した文字列から始まる |
[属性名$="文字列"] | 指定した文字列で終わる |
たとえば、name属性にuserを含む要素をすべて取得する場合は、次のように記述します。
<input name="userName"> <input name="userEmail"> <input name="companyName">
const userInputs = document.querySelectorAll('[name*="user"]');
この場合、userNameとuserEmailを持つ2つの要素が取得されます。
name属性がuserから始まる要素を取得する場合は、^=を使います。
const userInputs = document.querySelectorAll('[name^="user"]');
name属性がNameで終わる要素を取得する場合は、$=を使います。
const nameInputs = document.querySelectorAll('[name$="Name"]');
一般的にワイルドカードと呼ばれることもありますが、CSSでは属性セレクターを使った部分一致・前方一致・後方一致の指定です。
querySelectorAllで取得した要素を繰り返し処理する
querySelectorAll()で取得したNodeListには、複数の要素が入っています。
すべての要素に同じ処理を行う場合は、forEach()を使うと簡単です。
<p class="sampleClass">1個目のテキスト</p> <p class="sampleClass">2個目のテキスト</p> <p class="sampleClass">3個目のテキスト</p>
const elements = document.querySelectorAll('.sampleClass');
elements.forEach(function (element) {
element.style.color = 'blue';
});
このコードを実行すると、sampleClassを持つすべての要素の文字色が青になります。
要素を1つずつ取得したい場合は、配列のように番号を指定することもできます。
const elements = document.querySelectorAll('.sampleClass');
console.log(elements[0]);
console.log(elements[1]);
番号は0から始まるため、elements[0]が1個目、elements[1]が2個目の要素です。
querySelectorで要素を取得できないときの確認ポイント
コードを書いても要素を取得できない場合は、まず次の点を確認してみましょう。
- idの先頭に
#を付けているか - classの先頭に
.を付けているか - name属性を
[name="属性値"]で囲っているか - JavaScriptを実行した時点でHTML要素が作成されているか
- 大文字と小文字、スペルがHTMLと一致しているか
特に間違えやすいのが、idとclassの指定です。
// idを指定
document.querySelector('#sampleId');
// classを指定
document.querySelector('.sampleClass');
また、存在しない要素をquerySelector()で取得するとnullになります。
次のように要素を確認してから処理を行えば、nullが原因のエラーを防げます。
const element = document.querySelector('.sampleClass');
if (element) {
element.textContent = '文字を変更しました';
} else {
console.log('要素が見つかりませんでした');
}
まとめ
querySelector()とquerySelectorAll()を使えば、CSSと同じ書き方でHTML要素を取得できます。
- 最初の1件を取得するならquerySelector()
- 条件に一致するすべての要素を取得するならquerySelectorAll()
- idは
#id名で指定する - classは
.class名で指定する - name属性は
[name="属性値"]で指定する - 属性値の一部から検索するときは
*=・^=・$=を使う - querySelectorAll()の結果はNodeListという特殊な配列のようなもの
まずは、取得したい要素が1つか複数かを確認して、2つのメソッドを使い分けてみましょう。
