JavaScript querySelectorAll 複数要素を取得

querySelectorAll	querySelectorAllとは
	querySelectorAllでvalue値を取得する
複数セレクタ	複数のセレクタを指定しANDで絞り込む(空白区切り)
	別々のクラスにあるセレクタを指定(カンマ区切り)
	1つのクラスにある複数のセレクタを指定する(区切り無し)
サンプル	querySelectorAllで背景色と文字の色を変える
	querySelectorAllで文字列を変える、表示非表示

querySelectorAllとは

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

引数にCSSのセレクタを指定しNodeList(複数の要素)を取得します。
一致するものがない場合は、空のNodeListを返します。

NodeListのイメージ

querySelectorAllでvalue値を取得する

<input type="text" class="text1" value="red" maxlength="5" />
<input type="text" class="text1" value="blue" maxlength="5" />

<script>
    const qs1 = document.querySelectorAll(".text1");
    for (let i = 0; i < qs1.length; i++) {
        console.log(qs1.item(i).value); //red blue
    }
    let textid = "text1";
    const qs2 = document.querySelectorAll("." + textid);
    for (let i = 0; i < qs2.length; i++) {
        console.log(qs2.item(i).value); //red blue
    }

    const qs3 = document.querySelectorAll('input[type="text"]');
    for (let i = 0; i < qs3.length; i++) {
        console.log(qs3.item(i).value); //red blue
    }
</script>

5行目は、cssのクラス属性の指定(".text1")で1,2行目を取得します。
10行目のようにquerySelectorAllの引数に変数を指定することも可能です。
15行目は、cssの属性の指定('input[type="text"]')で1,2行目を取得します。

複数のセレクタを指定しANDで絞り込む(空白区切り)

document.querySelectorAll("セレクタセレクタ");

<div id="div2">
    <p class="p1">red</p>
    <p class="p2">yellow</p>
    <p class="p2">blue</p>
</div>

<script>
    const qs1 = document.querySelectorAll("#div2 .p2");

    qs1.forEach(function (a) {
        console.log(a.textContent); //yellow blue
    });
</script>

8行目の引数は、セレクタを空白区切りで指定して対象を絞っています。子孫セレクタです。

別々のクラスにあるセレクタを指定(カンマ区切り)

document.querySelectorAll("セレクタ,セレクタ");

<p class="p1">red</p>
<p class="p2">yellow</p>
<p class="p3">blue</p>
<p class="p3">green</p>

<script>
    const qs2 = document.querySelectorAll(".p2,.p3");

    qs2.forEach(function (a) {
        console.log(a.textContent); //yellow blue green
    });
</script>

7行目の引数は、セレクタをカンマ区切りで指定しています。

1つのクラスにある複数のセレクタを指定する(区切り無し)

document.querySelectorAll("セレクタセレクタ");

<p><span class="p2">red</span></p>
<p><span class="p2 p3">blue</span></p>
<p><span class="p2 p3">green</span></p>

<script>
    const qs2 = document.querySelectorAll(".p2.p3");

    qs2.forEach(function (a) {
        console.log(a.textContent); //blue green
    });
</script>

6行目の引数は、セレクタを区切り無しで指定しています。

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) {
      if (a.value === "赤") {
        a.value = "青";
        a.style.background = "#87CEFA";
        a.style.color = "red";
      } else {
        a.value = "赤";
        a.style.background = "rgb(250,128,114)";
        a.style.color = "blue";
      }
    });
  }
</script>

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

querySelectorAllで文字列を変える、表示非表示

ボタンを押すと文字の変更と表示非表示が行われます。

赤

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

<p class="p1">赤</p>
<p class="p2">赤</p>
<input type="button" value="変更" onclick="clickBtn2()" />

<script>
  function clickBtn2() {
    const qs1 = document.querySelectorAll(".p1");
    const qs2 = document.querySelectorAll(".p2");

    qs1.forEach(function (a) {
      if (a.textContent === "赤") {
        a.textContent = "青";
      } else {
        a.textContent = "赤";
      }
    });
    qs2.forEach(function (a) {
      if (a.style.visibility === "hidden") {
        a.style.visibility = "visible";
      } else {
        a.style.visibility = "hidden";
      }
    });
  }
</script>

3行目のボタンを押すと6行目の関数を実行します。
10,17行目は、forEachでループで個別の値を取得します。引数のaは、NodeListの個別の値です。
11行目からは、文字列の切り替えと表示と非表示を行っています。