[javascript]querySelectorでの要素取得・変更

javascript

bootstrap5系がそろそろリリースされるというニュースを見ていたんですが、
bootstrapからjqueryが削除されるらしく、
理由がjavascriptのクエリセレクタを使うと問題ないから…という一文を見て

javascriptのquerySelectorをほとんど使ったことなかったので検証してみました。

※MDN web docsがわかりやすいので、随所にリンクを入れています。

要素・値取得

idの要素取得(最初の一個)

document.querySelectorで要素取得できます。
複数ある場合は、1番目だけ返って来るようです。(1番最初に見つかった文字列)

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のプロパティをしっかり覚えていく必要がありそうですねー。

コメント

タイトルとURLをコピーしました