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

目次

querySelectorとは

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

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

 

querySelectorの使用例

querySelectorでvalue値を取得する

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

<script>
    const qs1 = document.querySelector("#text1").value;
    console.log(qs1); //red
</script>

4行目は、querySelectorで1行目のvalue値を取得しています。
cssのid属性で指定する場合は、#を指定します。

 

引数に変数を指定することも可能

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

<script>
    let textid = "text1";
    const qs2 = document.querySelector("#" + textid).value;
    console.log(qs2); //red
</script>

4行目は、変数に値をセットしています。
5行目のようにquerySelectorの引数に変数を指定することも可能です。

 

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

<input type="text" id="text1" name="name1" value="red" maxlength="5">に対して

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

 

複数のセレクタを指定し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.querySelector("#div2 .p2");
    console.log(qs1.textContent); //yellow
</script>

セレクタを空白区切りで指定して対象を絞っています。子孫セレクタです。

 

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

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

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

<script>
    const qs2 = document.querySelector(".p2.p3");
    console.log(qs2.textContent); //blue
</script>

セレクタを区切り無しで指定しています。

 

querySelectorで取得できているはずなのにnullになる

querySelectorを実行した時に、取得対象の要素がまだない場合nullになります。
querySelectorの場所をコードの後ろに持ってくる。またはwindow.onloadでページ読み込み後にquerySelectorを実行するようにします。

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

<script>
    window.onload = function () {
        const qs1 = document.querySelector("#text1").value;
        console.log(qs1); //red
    };
</script>

 

labelとinputの間にある文字列を置き換える(childNodes)

ボタンをクリックすると検索欄の前にある文字列を置き換えます。

 

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

<div class="search1">
    <label>
        ABCDE:
        <input type="search" class="" placeholder="" />
    </label>
</div>
<input type="button" value="click1" onclick="clickBtn11()" />
<input type="button" value="click2" onclick="clickBtn12()" />
<script>
    function clickBtn11() {
        const str1 = document.querySelector(".search1 label").childNodes[0];
        str1.textContent = str1.textContent.replace("ABCDE", "12345");
    }
    function clickBtn12() {
        const str1 = document.querySelector(".search1 label").childNodes[0];
        str1.textContent = str1.textContent.replace("12345", "ABCDE");
    }
</script>

querySelectorとchildNodesで対象を取得してreplaceで文字列を置き換えます。

querySelectorで1行目のクラスと2行目のlabelを指定し、最後にchildNodesで最初の文字列を指定しています。
対象の文字列は、replaceで置き換えています。
chileNodesがないと、文字列と検索欄も置き換わってしまいます。

 

querySelectorで背景色と文字の色を変える

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

 

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

<input type="text" id="input1" value="red" maxlength="6" />
<input type="button" value="click" onclick="clickBtn1()" />

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

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

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

 

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

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

 

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

<div id="div2">
    <p id="p2a">red</p>
    <p id="p2b">red</p>
    <p id="p2c">green</p>
</div>
<input type="button" value="click" onclick="clickBtn2()" />

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

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

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

関連の記事

JavaScript getElementByIdでIDから値を取得
JavaScript querySelectorAll 複数要素を取得