JavaScript querySelectorAll 複数要素を取得

nas2018/09/11

JavaScriptnのquerySelectorAllのサンプルです。

目次

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

querySelectorAllとは

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

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

NodeListのイメージ

 

querySelectorAllでCSSのセレクタを使用する例

上記はテキストボックスです(input type="text")。

引数

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

戻り値

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

 

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";
        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値、背景色、文字色を設定しています。

 

文字の変更、文字の表示非表示

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

赤

赤

 

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

<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行目からは、文字列の切り替えと表示と非表示を行っています。

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

document.querySelectorAll("セレクタ セレクタ"); 
<div id="div2">
  <p class="p1">赤</p>
</div>
<input type="button" value="変更" onclick="clickBtn2()" />

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

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

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

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

document.querySelectorAll("セレクタ,セレクタ"); 
<p><span class="p2">赤</span></p>
<p><span class="p3">赤</span></p>
<input type="button" value="変更" onclick="clickBtn2()" />

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

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

7行目は、メソッドの引数にカンマ区切りでクラスを2つ指定しています。
(.p2の要素を取得する。.p3の要素を取得する。)
3行目のボタンを押すと1,2行目の文字が変わります。

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

document.querySelectorAll("セレクタセレクタ"); 
<p><span class="p2 p3">赤</span></p>
<input type="button" value="変更" onclick="clickBtn2()" />

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

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

2行目のボタンをクリックすると1行目の赤という文字が切り替わります。
6行目のquerySelectorAllの引数は、セレクタを区切り無しで繋いでいます。

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

関連の記事

JavaScript getElementById ID属性で取得/設定する
JavaScript querySelector セレクタで要素を取得

△上に戻る