JavaScript | querySelector()とquerySelectorAll()の使い方、指定方法まとめ

2020-11-292021-02-02JavaScript CSSセレクタ,JavaScript

JavaScriptで利用できるquerySelector()やquerySelectorAll()のセレクター指定パターンのまとめです。

querySelector()、querySelectorAll()の基本

• 指定方法は引数にカンマで囲う
• getElementById()やgetElementsByClassName()の代用、より複雑な指定が可能
• querySelector()は最初のひとつ、querySelectorAll()は全ての要素を取得
• CSSセレクタと同様の指定方法が可能（ワイルドカード、or、子要素など）
• 疑似クラスも指定可能
• 疑似要素（::before ::afterなど）の指定は空値が返る

querySelector()とquerySelectorAll()の違い

querySelector()は指定したセレクターの条件と一致したHTML要素のうち最初のひとつを返します。
返り値は配列ではなく単一のデータとして返されます。

querySelectorAll()は指定したセレクターの条件と一致したHTML要素を全て返します。
返り値は配列として返されます。

querySelectorAll()のfor文ループ処理

querySelectorAll()は返り値の結果がひとつであっても配列として取得します。

繰り返し文であるfor文でループ処理をする方法のうちひとつを紹介しています。

変数名「target」にquerySelectorAll()の返り値を代入した場合。

for(let i in target){
	if (target.hasOwnProperty(i)) {
		console.log(target[i]);//配列の中身、HTML要素
		console.log(target[i].id);//要素に付与されているid
		console.log(target[i].className);//要素に付与されているclass名
	}
}

※要素に付与されているid名やclass名の取得サンプルも記載

idを指定してHTML要素を取得する

idを指定してHTML要素を取得する方法です。

<div id="item1" class="aaa"></div>

idを指定する場合、要素に付与するidは通常ページ内においてひとつなのでquerySelector()で支障はないはずです。

idの指定には「#」を付けた名前を利用します。

let target = document.querySelector('#item1');

console.log(target);
//<div id="item1" class="aaa"></div>

classを指定してHTML要素を取得する

<div id="item1" class="aaa"></div>
<div id="item2" class="aaa"></div>
<div id="item3" class="bbb"></div>

classを指定する場合、最初に発見されたひとつのみが必要な場合を除いて基本的にはquerySelectorAll()を利用します。

classの指定には「.」を付けた名前を利用します。

let target = document.querySelectorAll('.aaa');

for(let i in target){
	if (target.hasOwnProperty(i)) {
		console.log(target[i]);
	}
}
//<div id="item1" class="aaa"></div>
//<div id="item2" class="aaa"></div>

返り値は配列となっていますのでfor文で確認処理をしています。
サンプルでは配列として1つ目と2つ目の要素が格納されていることが確認できます。

複数のclassを指定してHTML要素を取得する（and）

複数のclassを指定して指定した全てのclass名が付与されているある（and）HTML要素を取得する方法です。

<div id="item1" class="aaa"></div>
<div id="item2" class="bbb"></div>
<div id="item3" class="aaa bbb"></div>

複数のclassを指定して指定した全てのclass名が付与されているHTML要素を取得する場合は、連続した記述でclass名を指定していきます。

この場合、半角スペース等は不要で想定した値が取得できなくなります。

let target = document.querySelectorAll('.aaa.bbb');

for(let i in target){
	if (target.hasOwnProperty(i)) {
		console.log(target[i]);
	}
}
//<div id="item3" class="aaa bbb"></div>

複数のclassを指定してHTML要素を取得する（or）

複数のclassを指定していずれかのclass名が付与されている（or）HTML要素を取得する方法です。

<div id="item1" class="aaa"></div>
<div id="item2" class="bbb"></div>
<div id="item3" class="ccc"></div>

複数のclassを指定していずれかのclass名が付与されているHTML要素を取得する場合はカンマで区切って記述していきます。

サンプルでは「aaa」「bbb」いずれかのclass名が付与されている要素を取得しますので1つ目と2つ目のHTML要素が返り値として配列に入っています。

let target = document.querySelectorAll('.aaa, .bbb');

for(let i in target){
	if (target.hasOwnProperty(i)) {
		console.log(target[i]);
	}
}
//<div id="item1" class="aaa"></div>
//<div id="item2" class="bbb"></div>

idやclassを除外してHTML要素を取得する（not）

複数のidやclassを指定・除外してHTML要素を取得する方法です。

<div id="item1" class="aaa bbb"></div>
<div id="item2" class="aaa ccc"></div>
<div id="item3" class="aaa ddd"></div>

querySelector()、querySelectorAll()ではCSSでのセレクタ指定と同じ要領で「:not()」を利用することが可能となっています。

サンプルではclass名「aaa」が付与されている要素のうちclass名「ccc」を含むHTML要素以外の要素のみを取得しています。

let target = document.querySelectorAll('.aaa:not(.ccc)');

for(let i in target){
	if (target.hasOwnProperty(i)) {
		console.log(target[i]);
	}
}
//<div id="item1" class="aaa bbb"></div>
//<div id="item3" class="aaa ddd"></div>

他にも「div:not()」や「#id:not()」などの記述も通常通り利用可能です。

全てのdivやp要素などを取得する

ページ内の全てのdivやp要素などを取得する方法です。

<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>

単独で指定するにはdivやpなど使われる頻度が高いセレクターは使い所が難しいですが、formなど特定のセレクター要素であればidやclassを指定しなくても使えるので利用価値はあるかもしれません。

サンプルの場合、3つのHTML要素は全てdivなので、返り値には配列として3つのHTML要素が格納されています。

let target = document.querySelectorAll('div');

for(let i in target){
	if (target.hasOwnProperty(i)) {
		console.log(target[i]);
	}
}
//<div id="item1"></div>
//<div id="item2"></div>
//<div id="item3"></div>

特定の要素内の子要素を取得する

特定の要素内の子要素を取得する方法です。

<div id="container">
	<div id="item1"></div>
	<div id="item2"></div>
	<div id="item3"></div>
</div>

特定の要素内の子要素を取得するには、CSSセレクター指定と同様に「>」を利用した指定が可能となっています。

サンプルではid名「container」内のdiv要素を取得するコードとなっています。

返り値には、id名「container」内のdiv要素が3つ格納されていることが確認できます。

let target = document.querySelectorAll('#container > div');

for(let i in target){
	if (target.hasOwnProperty(i)) {
		console.log(target[i]);
	}
}
//<div id="item1"></div>
//<div id="item2"></div>
//<div id="item3"></div>

特定の要素の次にある要素を取得する

特定の要素の次にある要素を取得する方法です。

<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>

特定の要素内の次にある要素を取得するには、CSSセレクター指定と同様に「+」を利用した指定が可能となっています。

サンプルではid名「item2」が付与されている要素の次にあるdiv要素を取得するコードとなっています。

返り値には、id名「item3」のみが格納されていることが確認できます。

let target = document.querySelectorAll('#container > div');

for(let i in target){
	if (target.hasOwnProperty(i)) {
		console.log(target[i]);
	}
}
//<div id="item3"></div>

サンプルではquerySelectorAll()を利用していますが、返り値がひとつしかない環境下であればquerySelector()でも問題ないです。

属性セレクタを指定して要素を取得する

属性セレクタを指定して要素を取得する方法です。

<a href="#" title="aaa">aaa</a>
<a href="#" title="bbb">bbb</a>
<a href="#" title="ccc">ccc</a>

例えば、上記のようなHTML要素があった場合に、titile属性が付与されているaタグ要素を取得するには以下のように記述します。

let target = document.querySelectorAll('a[title]');

for(let i in target){
	if (target.hasOwnProperty(i)) {
		console.log(target[i]);
	}
}

//<a href="#" title="aaa">aaa</a>
//<a href="#" title="bbb">bbb</a>
//<a href="#" title="ccc">ccc</a>

また、CSSでの指定と同じように属性セレクタの値を指定することも可能となっています。

「a[title=aaa]」を指定した場合、返り値にはtitle属性の値が"aaa"とされているaタグ要素のみを取得します。

let target = document.querySelectorAll('a[title=aaa]');

for(let i in target){
	if (target.hasOwnProperty(i)) {
		console.log(target[i]);
	}
}

//<a href="#" title="aaa">aaa</a>

ワイルドカードで指定して要素を取得する

querySelector()やquerySelectorAll()でワイルドカードを使った要素の取得方法です。

<div id="container">
	<p id="item1"></p>
	<div id="item2"></div>
</div>

サンプルでは「#container」内にある要素をワイルドカードを使って取得しています。

返り値には子要素にあるpタグ、divタグの両方が配列として格納されています。

let target = document.querySelectorAll('#container *');

for(let i in target){
	if (target.hasOwnProperty(i)) {
		console.log(target[i]);
	}
}
//<p id="item1"></p>
//<div id="item2"></div>

疑似クラス first-childで最初の要素を取得する

疑似クラスのfirst-child()を指定して最初の要素を取得する方法です。

<div id="item1" class="aaa"></div>
<div id="item2" class="aaa"></div>
<div id="item3" class="aaa"></div>

class名「aaa」が付与されたHTML要素から「:first-child」を利用して最初の要素を取得する場合。

let target = document.querySelectorAll('.aaa:first-child');

for(let i in target){
	if (target.hasOwnProperty(i)) {
		console.log(target[i]);
	}
}
//<div id="item1" class="aaa"></div>

疑似クラス nth-child()でn番目の要素を取得する

疑似クラスのnth-child()を指定してn番目の要素を取得する方法です。

<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>

div要素のうち、最初に見つかった要素から3番目のHTML要素を取得する場合。

let target = document.querySelectorAll('div:nth-child(3));

for(let i in target){
	if (target.hasOwnProperty(i)) {
		console.log(target[i]);
	}
}
//<div id="item3" class="aaa"></div>

疑似クラス nth-last-child()で最後の要素からn番目の要素を取得する

疑似クラスのnth-last-child()を指定して最後の要素からn番目の要素を取得する方法です。

<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>

div要素のうち、最後の要素から1番目のHTML要素を取得する場合。

let target = document.querySelectorAll('div:nth-last-child(1));

for(let i in target){
	if (target.hasOwnProperty(i)) {
		console.log(target[i]);
	}
}
//<div id="item3" class="aaa"></div>

疑似クラス emptyで子要素を持たない要素を取得する

疑似クラスのemptyを指定して子要素を持たない要素を取得する方法です。

<div id="item1">
	<p>item1</p>
</div>
<div id="item2">
	<p>item2</p>
</div>
<div id="item3">
	
</div>

div要素のうち子要素を持たないHTML要素を取得する場合は以下のようになります。

let target = document.querySelectorAll('div:empty);

for(let i in target){
	if (target.hasOwnProperty(i)) {
		console.log(target[i]);
	}
}
//<div id="item3"></div>