JavaScript セレクタで複数の要素を取得する(querySelectorAll)

JavaScriptnのセレクタで複数の要素を取得するサンプルです。
querySelectorAllメソッドを使用します。

確認環境
・Windows10
・Google Chrome

目次

複数のvalue値を取得/設定するサンプル

サンプルです。
ボタンを押すとquerySelectorAllメソッドで複数のvalue値の取得と設定を行い、テキストボックス内の文字が変化します。

コード

上記サンプルのコードです。

<input type="text" class="input1" value="赤" maxlength="6">
<input type="text" class="input1" value="赤" maxlength="6">
<input type="button" value="変更" onclick="clickBtn1()">

<script>
function clickBtn1(){
	const qs1 = document.querySelectorAll(".input1");

	qs1.forEach(function(a) {
		const value1 = a.value;

		if (value1 == "赤"){
			a.value = "青";
		}else{
			a.value = "赤";
		}
	});
}
</script>

3行目のボタンを押すと6行目の関数を実行します。
7行目は、querySelectorAllメソッドで1,2行目を指定しています。引数は「.input1」でCSSのクラスセレクタです。戻り値は、NodeListです。
9行目は、forEachでループで個別の値を取得します。引数のaは、NodeListの個別の値です。
13,15行目は、valueに値を設定しています。

 

子孫セレクタで対象を絞る

サンプルです。
ボタンを押すと、querySelectorAllメソッドの引数を子孫セレクタにして対象を絞り、下2つのテキストボックスの文字のみ変更します。

コード

上記サンプルのコードです。

<div id="div1">
<input type="text" class="input1" value="赤" maxlength="6">
<input type="text" class="input1" value="赤" maxlength="6">
</div>
<div id="div2">
<input type="text" class="input1" value="赤" maxlength="6">
<input type="text" class="input1" value="赤" maxlength="6">
</div>
<input type="button" value="変更" onclick="clickBtn2()">

<script>
function clickBtn2(){
	const qs2 = document.querySelectorAll("#div2 .input1");

	qs2.forEach(function(a) {
		const value1 = a.value;

		if (value1 == "赤"){
			a.value = "青";
		}else{
			a.value = "赤";
		}
	});
}
</script>

9行目のボタンを押すと12行目の関数を実行します。
13行目の引数は、セレクタを2つ指定して対象(6,7行目)を絞っています。子孫セレクタです。子孫セレクタは、空白区切りにします。
15行目は、forEachでループで個別の値を取得します。引数のaは、NodeListの個別の値です。
16行目は、valueで値を取得しています。
19,21行目は、value値に値を設定しています。

 

querySelectorAll

変数 = parentNode.querySelectorAll(CSSのセレクタ);

関連の記事

JavaScript ID属性で取得/設定する(getElementById)
JavaScript タグ単位で取得/設定する(getElementsByTagName)
JavaScript クラス単位で取得/設定する(getElementsByClassName)
JavaScript セレクタで要素を取得する(querySelector)

△上に戻る