JavaScript querySelector セレクタで要素を取得

JavaScriptのquerySelectorのサンプルです。

サンプル	querySelectorとは
	querySelectorでCSSのセレクタを使用する例
	value値を取得設定、背景と文字の色を変える
	ANDで対象を絞る、文字列の変更、文字列の表示非表示

querySelectorとは

document.querySelector(CSSのセレクタ);

引数にCSSのセレクタを指定し最初にマッチした要素(Elementオブジェクト)を取得します。
一致するものがない場合は、nullを返します。

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

テキストボックスのhtmlです。id属性とname属性があります。

cssのid属性で指定する場合#を指定

「document.querySelector("#text1")」で
「<input type="text" id="text1" name="name1" value="赤" maxlength="5">」を取得できます。

value値を取得する場合

「document.querySelector("#text1").value」で「赤」を取得できます。

cssのname属性で指定する場合[name=]等を指定

「querySelector('[name="name1"]')」や
「querySelector('input[name="name1"]')」や
「querySelector('input[type="text"][name="name1"]')」のように指定できます。

value値を取得設定、背景と文字の色を変える

ボタンを押すと文字(value値)が変化し色が変わります。

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

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

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

    if (qs1.value === "赤") {
      qs1.value = "青";
      qs1.style.background = "#87CEFA";
      qs1.style.color = "red";
    } else {
      qs1.value = "赤";
      qs1.style.background = "rgb(250,128,114)";
      qs1.style.color = "blue";
    }
  }
</script>

2行目のボタンを押すと5行目の関数を実行します。
6行目は、querySelectorメソッドで1行目を指定しています。引数は「#input1」でCSSのIDセレクタです。
9行目からは、value値、背景色、文字色を設定しています。

ANDで対象を絞る、文字列の変更、文字列の表示非表示

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

赤

テスト

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

<div id="div2">
  <p id="p2a">赤</p>
  <p id="p2b">赤</p>
  <p id="p2c">テスト</p>
</div>
<input type="button" value="変更" onclick="clickBtn2()" />

<script>
  function clickBtn2() {
    const qs1 = document.querySelector("#div2 #p2b");
    const qs2 = document.querySelector("#div2 #p2c");

    if (qs1.textContent === "赤") {
      qs1.textContent = "青";
      qs2.style.visibility = "hidden"; //非表示
    } else {
      qs1.textContent = "赤";
      qs2.style.visibility = "visible"; //表示
    }
  }
</script>

10,11行目の引数は、セレクタを2つ指定して対象を絞っています。子孫セレクタです。子孫セレクタは、空白区切りにします。
13行目は、textContentで判定しています。
14,17行目は、textContentで文字を設定しています。
15,18行目は、文字列の表示と非表示を設定しています。

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