目次
querySelectorとは
| document.querySelector(CSSのセレクタ); |
引数にCSSのセレクタを指定し最初にマッチした要素(Elementオブジェクト)を取得します。
一致するものがない場合は、nullを返します。
querySelectorでCSSのセレクタを使用する例
テキストボックスのhtmlです。
| <input type="text" id="text1" name="name1" value="red" maxlength="5"> |
cssのid属性で指定する場合#を指定
「document.querySelector("#text1")」で
「<input type="text" id="text1" name="name1" value="red" maxlength="5">」を取得できます。
value値を取得する場合
「document.querySelector("#text1").value」で「red」を取得できます。
cssのname属性で指定する場合[name=]等を指定
「querySelector('[name="name1"]')」や
「querySelector('input[name="name1"]')」や
「querySelector('input[type="text"][name="name1"]')」のように指定できます。
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値を取得しています。
引数に変数を指定することも可能
<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の引数に変数を指定することも可能です。
複数のセレクタを指定し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)
以下の検索欄の前にある文字列を置き換えるサンプルです。
ABC:
querySelectorとchildNodesで対象を取得してreplaceで文字列を置き換えます。
<div class="search1">
<label>
ABC:
<input type="search" class="" placeholder="" >
</label>
</div>
<script>
const str1 = document.querySelector(".search1 label").childNodes[0];
str1.textContent = str1.textContent.replace('ABC', 'filter');
</script>8行目は、querySelectorで1行目のクラスと2行目のlabelを指定し、最後にchildNodesで最初の文字列を指定しています。
9行目は、対象の文字列をreplaceで置き換えています。
chileNodesがないと、文字列と検索欄も置き換わってしまいます。
querySelectorで背景色と文字の色を変える
ボタンを押すと文字(value値)が変化し色が変わります。
上記サンプルのコードです。
<input type="text" id="input1" value="red" maxlength="6" />
<input type="button" value="変更" 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行目の文字列が表示と非表示で切り替わります。
red
red
テスト
上記サンプルのコードです。
<div id="div2">
<p id="p2a">red</p>
<p id="p2b">red</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 === "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 複数要素を取得