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

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

目次

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

CSSのセレクタで要素を取得する(querySelector)

変数 = document.querySelector(CSSのセレクタ);
  • 引数は、CSSのセレクタを指定します。
  • 戻り値は、最初にマッチした要素(Elementオブジェクト)です。
  • 一致するものがない場合は、nullを返します。

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

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

<input type="text" id="text1" name="name1" value="赤" maxlength="5">

引数

  • id属性で指定する場合は、「querySelector("#text1")」とします。
  • name属性で指定する場合は、「querySelector('input[name="name1"]')」や「querySelector('input[type="text"][name="name1"]')」のように指定できます。
  • CSSのセレクタを使えるので細かい指定ができます。

戻り値

  • querySelectorメソッドの戻り値は、対象の要素(Element)です。
  • 上記例のhtmlに対してquerySelector("#text1")とした場合、
    「<input type="text" id="text1" name="name1" value="赤" maxlength="5">」を取得できます。

 

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";
    } else {
      qs1.value = "赤";
      qs1.style.background = "#FA8072";
    }
  }
</script>

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

 

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

ボタンを押すと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

関連の記事

CSSの書き方/コメントとセレクタの一覧
JavaScript getElementById ID属性で取得/設定する
JavaScript getElementsByTagName タグ名で取得
JavaScript getElementsByClassName クラスで取得
JavaScript querySelectorAll 複数要素を取得

△上に戻る