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

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

説明	CSSのセレクタで要素を取得するメソッド
取得/設定	value値を取得/設定する
	子孫セレクタで対象を絞る

CSSのセレクタで要素を取得するメソッド

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

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

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

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

id属性で指定する場合は、「querySelector("#text1")」とします。

name属性で指定する場合は、「querySelector('input[name="name1"]')」や「querySelector('input[type="text"][name="name1"]')」のように指定できます。

CSSのセレクタを使えるので細かい指定ができます。

戻り値

querySelectorメソッドの戻り値は、対象の要素(Element)です。

例としてquerySelector("#text1")とした場合、
「<input type="text" id="text1" name="name1" value="赤" maxlength="5">」を取得できます。

value値を取得/設定する

サンプルです。
ボタンを押すとquerySelectorメソッドでvalue値の取得と設定を行い、テキストボックス内の文字が変化します。

コード

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

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

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

	if (value1 == "赤"){
		qs1.value = "青";
	}else{
		qs1.value = "赤";
	}
}
</script>

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

子孫セレクタで対象を絞る

サンプルです。
ボタンを押すと、querySelectorメソッドの引数を子孫セレクタにして対象を絞り、下の文字のみ変更します。

赤

コード

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

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

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

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

9行目の引数は、セレクタを2つ指定して対象を絞っています。子孫セレクタです。子孫セレクタは、空白区切りにします。
10行目は、textContentで文字を取得しています。
13,15行目は、textContentで3行目に文字を設定しています。

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