bootstrap5系がそろそろリリースされるというニュースを見ていたんですが、
bootstrapからjqueryが削除されるらしく、
理由がjavascriptのクエリセレクタを使うと問題ないから…という一文を見て
javascriptのquerySelectorをほとんど使ったことなかったので検証してみました。
※MDN web docsがわかりやすいので、随所にリンクを入れています。
要素・値取得
idの要素取得(最初の一個)
document.querySelectorで要素取得できます。
複数ある場合は、１番目だけ返って来るようです。(１番最初に見つかった文字列）
Elementが返ってきます。
document.querySelector("#content_top");
=> <div id="content_top">top text</div>
classの要素取得(複数)
document.querySelectorAllで複数要素取得できます。
NodeListで返ってきます。
document.querySelectorAll('.color_red');
=> NodeList(3) [div.color_red, div.color_red, div.color_red]
配列の番号を指定して、特定要素を取ったり
document.querySelectorAll('.color_red')[0].innerText;
=> hoge1
forEachでループして、それぞれにアクセスもできます。
document.querySelectorAll('.color_red').forEach(function(value, index, list) {
console.log(value.innerText)
});
=> hoge1
=> hoge2
=> hoge3
formの値を取得
テキストフィールド(textfield)
テキストフィールドは、name属性を使って取得できます。
Elementが返ってきます。
document.querySelector('[name="test_text"]');
=> <input type="text" size="20" placeholder="test..." name="test_text">
テキストフィールドに入力した値にはElementのvalueでアクセスします。
document.querySelector('[name="test_text"]').value;
=> 入力した値
セレクトボックス(selectbox)
セレクトボックスも、name属性を使って取得できます。
document.querySelector('[name="fruits"]');
同じようにElementのvalueでアクセスします。
document.querySelector('[name="fruits"]').value;
=> 選択した値
チェックボックス(checkbox)
チェックボックスで、チェックされた要素はname属性と:checkedを使うと取得できます。
NodeListで返ってきます。
document.querySelectorAll('input[name="game_maker"]:checked');
=> チェックした要素
親要素を取得する
parentElementにアクセスすると取得できます。
親の親はparentElement.parentElementと続けていけばいいようです。
document.querySelector('#games').parentElement;
=> <body>
要素の値変更
id要素のテキスト変更
要素を取得して、innserTextの値を変更すると変わってくれます。
document.querySelector("#content_top").innerText = "abc";
class要素のテキスト変更
querySelectorAllで複数要素取得して、ループでinnerTextの値を変えます。
document.querySelectorAll('.color_red').forEach(function(value, index, list) {
value.innerText = "123";
});
テキストフィールドの値変更
valueに値を代入すると反映されます。
document.querySelector('[name="test_text"]').value = 100;
チェックボックス(checkbox)の全選択・解除
全選択・解除はdocument.querySelectorAllで要素を取得して
NodeListをforEachでループして、要素のcheckedをtrueまたはfalseにします。
document.querySelectorAll('input[name="game_maker"]').forEach(function(value) {
value.checked = true;
});
セレクトボックスの値選択
name属性でdocument.querySelectorを使って、要素を取得した後にselectedIndexの値を変更するか
optionにvalueを設定している場合は、valueに同じ値を設定すると選択されます。
document.querySelector('[name="fruits"]').selectedIndex = 2;
or
document.querySelector('[name="fruits"]').selectedIndex = "o";
サンプルHTML
今回の動作検証は下記のHTMLを使用しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>querySelector test</title>
<style>.color_red { color: red; }</style>
</head>
<body>
<div id="content_top">top text</div>
<div class="color_red">hoge1</div>
<div class="color_red">hoge2</div>
<div class="color_red">hoge3</div>
<form>
<label><input type="text" size="20" placeholder="test..." name="test_text"></label>
</form>
<select name="fruits">
<option></option>
<option value="a">apple</option>
<option value="o">orange</option>
<option value="g">grape</option>
</select>
<div id="games">
<input type="checkbox" name="game_maker" value="1">nintendo
<input type="checkbox" name="game_maker" value="2">sony
</div>
</body>
</html>
おわりに
意外と簡単に要素を取得したり、変更したりできるようです。
短く書けるjqueryの方がいい気もしなくもないですが・・・
使っていく場合は、javascriptのElementのプロパティをしっかり覚えていく必要がありそうですねー。
コメント