要素の取得 document.querySelector…

要素の取得

HTMLの要素を取得する方法として、今回は qerySelector というメソッドを使っていきます。
querySelector ではCSSのセレクタを使って操作していきます。

「セレクタ」と聞いてすぐにイメージできますか？
簡単に復習ですが、次の例だとCSSを書いた時の「body」に当たる部分がセレクタになります。

基本的な考え方は、前回の document.getElementById で行ったように JavaScript側からHTMLの要素を指定する という内容と同じです。

document.querySelector

【クラス名を使って取得する場合】

次のようなHMTLがあったとします。

    <!-- index.html -->
<body>
    <div class="box">BOX1</div>
    <div class="box">BOX2</div>
    <div id="box">BOX3</div>
    <script src="js/main.js"></script>
</body>

document.querySelector(.クラス名) を使用して取得します。

// main.js
let box = document.querySelector('.box');
console.log(box);

【idを使って取得する場合】

    <!-- index.html -->
<body>
    <div class="box">BOX1</div>
    <div class="box">BOX2</div>
    <div id="box">BOX3</div>
    <script src="js/main.js"></script>
</body>

document.querySelector('#id') を使用します。

// main.js
let box = document.querySelector('#box');
console.log(box);

document.querySelectorAll

先ほどまでの document.querySelector では、HTMLを上から順に見ていき、最初に見つかった一つだけを取得できます。
同じクラス名や、divタグなど 複数を選択したい 場合は document.querySelectorAll と書きます。

    <!-- index.html -->
<body>
    <div class="box">BOX1</div>
    <div class="box">BOX2</div>
    <div id="box">BOX3</div>
    <script src="js/main.js"></script>
</body>

※for文を使っているのは、複数の要素をconsole.logで確認のためです。
class名がboxの要素を取得してみます。

// main.js
let boxClass = document.querySelectorAll('.box');
for (let i = 0; i < boxClass.length; i++) {
    console.log(boxClass[i]);
}

まとめ

document.querySelector(‘’); ➡︎最初に出てきた1件だけ取得
document.querySelectorAll(‘’); ➡︎全件取得

何から取得するか 書き方 注意点
id document.querySelector(‘#id名’) id名の前に「 # 」をつける
class document.querySelector(‘.クラス名’) クラス名の前に「 . 」をつける
〇〇の直接の子要素△△を全て document.querySelectorAll(‘〇〇 > △△’) 〇〇を「親」つまり△△より大きいと考える
input要素のtype属性が〇〇を全て document.querySelectorAll(‘input[type=〇〇]’)

ちなみに、以下は同じ結果になります。
document.getElementsByClassName('クラス名') と document.querySelectorAll(‘.クラス名’)
document.getElementById('id名') と document.querySelector(‘#id名’)
　
　
　

以下、プラスアルファの知識

例えば以下のような場合です。
・formタグの中にあるinputタグ全て
・input要素のtype属性がradioの要素を全て

＜formタグの中にあるクラス名がboxのもの全て＞

「 formタグの中にあるクラス名がboxのもの全て 」を「 formタグの直接の子要素であるクラス名がboxのものを全て 」と読み替えて考えてみてください。

//以下のように書き表します
let elems = document.querySelectorAll('form > .box');
    <!-- index.html -->
<body>
    <div class="box">BOX1</div>
    <form action="">
        <div class="box">BOX2</div>
        <div class="box">BOX3</div>
        名前：<input type="text" name="name"> <br>
        年齢：
        <input type="radio" name="age" value="20"> 20歳以上
        <input type="radio" name="age" value="30"> 30歳以上
        <input type="radio" name="age" value="40"> 40歳以上 <br>
        性別：
        <input type="radio" name="gender" value="男"> 男
        <input type="radio" name="gender" value="女"> 女
    </form>
    <script src="js/main.js"></script>
</body>
// main.js
let elems = document.querySelectorAll('form > .box');
for (let i = 0; i < elems.length; i++) {
    console.log(elems[i]);
}

　
　

＜input要素のtype属性がradioの要素を全て＞

//以下のように書き表します
let elems = document.querySelectorAll('input[type=radio]');
    <!-- index.html -->
<body>
    <form action="">
        名前：<input type="text" name="name"> <br>
        年齢：
        <input type="radio" name="age" value="20""> 20歳以上
        <input type="radio" name="age" value="30"> 30歳以上
        <input type="radio" name="age" value="40"> 40歳以上 <br>
        性別：
        <input type="radio" name="gender" value="男"> 男
        <input type="radio" name="gender" value="女"> 女
    </form>
    <script src="js/main.js"></script>
</body>
// main.js
let elems = document.querySelectorAll('input[type=radio]');
for (let i = 0; i < elems.length; i++) {
    console.log(elems[i]);
}

課題

理解度チェック
JavaScript→2-2というフォルダの中に作成してください。
出力の結果はconsole.logで表示してください。
（この問題は、ファイルを一つにするために、HTMLの中でCSSとJavaScriptを読み込む書き方をしています。以下のコードをコピーして問題を解いてください。）

問1：テキストの表示非表示を切り替えるボタンを作成してください。（getElementByIdとquerySelectorのどちらを使用しても大丈夫です）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="ボタン" onClick="changeBtn()">
    <p id="p1">ボタンが押されると表示非表示が切り替わります。</p>

    <script>
        function changeBtn() {
            // ①id「p1」の要素を取得
            
            // ②取得したp1に「display:none」が無かったら、「display:none」を付与する。
            // 取得したp1に「display:none」があったら、「display:block」を付与する。
        }
    </script>
</body>
</html>

【ヒント】
クリックされたら、用意しておいた関数を実行させる方法は、一つ前の 2.要素の取得 document.getElement…で、実は似たようなことを行っています。
参考にしてみてください。

カテゴリー

アーカイブ

Close Bitnami banner
Bitnami