JavaScript セレクタで要素を取得する(querySelector) |

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

value値を取得/設定する
子孫セレクタで対象を絞る
querySelector

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 innerHTML1 = qs1.innerHTML;

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

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

querySelector

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

引数は、CSSのセレクタを指定します。
戻り値は、最初にマッチした要素(Elementオブジェクト)です。
先頭にあるdocumentは、別の要素に変更できます。
以下は、MDNのquerySelectorのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector