JavaScript querySelectorAll 複数要素を取得

nas

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

目次

説明 CSSセレクタで複数要素を取得する(querySelectorAll)
サンプル 複数のvalue値を取得/設定する+背景色を変える
  子孫セレクタで対象を絞る＋文字列の変更＋文字列の表示/非表示

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

変数 = parentNode.querySelectorAll(CSSのセレクタ);
  • 引数は、CSSのセレクタを指定します。
  • 戻り値は、NodeListです。複数の要素を取得します。
  • 一致するものがない場合は、空のNodeListを返します。

CSSのセレクタを指定とは？

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

<input type="text" class="text1" name="name1" value="赤" maxlength="5">
<input type="text" class="text1" name="name2" value="青" maxlength="5">

引数

  • class属性で指定する場合は、「querySelectorAll(".text1")」とします。
  • type属性で指定する場合は、「querySelectorAll('input[type="text"]')」のように指定できます。
  • CSSのセレクタで指定できるので細かい指定ができます。

戻り値

  • querySelectorAllメソッドの戻り値は、対象のNodeListです。
  • 上記例のhtmlに対してquerySelectorAll(".text1")とした場合で、戻りの変数.item(0)とすれば、
    要素(Element)である「<input type="text" class="text1" name="name1" value="赤" maxlength="5">」を取得できます。
  • 以下は、NodeListのイメージです。

 

複数のvalue値を取得/設定する+背景色を変える

ボタンを押すとテキストボックス内の文字(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";
      } else {
        a.value = "赤";
        a.style.background = "#FA8072";
      }
    });
  }
</script>

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

 

子孫セレクタで対象を絞る＋文字列の変更＋文字列の表示/非表示

ボタンを押すと2行目の文字列が代わり3行目の文字列が表示と非表示で切り替わります。

赤 赤

赤 赤

テスト テスト

 

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

<div id="div2">
  <p><span class="p1">赤</span> <span class="p1">赤</span></p>
  <p><span class="p2">赤</span> <span class="p2">赤</span></p>
  <p><span class="p3">テスト</span> <span class="p3">テスト</span></p>
</div>
<input type="button" value="変更" onclick="clickBtn2()" />

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

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

6行目のボタンを押すと9行目の関数を実行します。
10,11行目の引数は、セレクタを2つ指定して対象を絞っています。子孫セレクタです。子孫セレクタは、空白区切りにします。
13,20行目は、forEachでループで個別の値を取得します。引数のaは、NodeListの個別の値です。
15,17行目は、value値に値を設定しています。
22,24行目は、文字列の表示と非表示を設定しています。

以下は、MDNのquerySelectorAllのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll

関連の記事

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

△上に戻る