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

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

確認環境
・Windows10
・Google Chrome

説明	querySelectorAllはCSSのセレクタで複数の要素を取得する
取得/設定	複数のvalue値を取得/設定する
	子孫セレクタで対象を絞る

querySelectorAllはCSSのセレクタで複数の要素を取得する

querySelectorAllはCSSのセレクタで複数の要素を取得します。

以下にテキストボックスのhtmlがあるとします。(input type="text"です)

このときclass属性で指定する場合は、querySelectorAll(".text1")で、または

type属性で指定する場合は、querySelectorAll('input[type="text"]')のように指定できます。

querySelectorAllメソッドの戻り値は、対象のNodeListです

例としてquerySelectorAll(".text1")とした場合、戻りの変数.item(0)とすれば、要素(Element)である<input type="text" class="text1" name="name1" value="赤" maxlength="5">を取得できます。

CSSのセレクタで指定できるので細かい指定ができます。

以下は、NodeListのイメージです。

複数の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のセレクタ);

引数は、CSSのセレクタを指定します。
戻り値は、NodeListです。
以下は、MDNのquerySelectorAllのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll