【JS】querySelectorとquerySelectorAllの使い方

こんにちは、元調剤薬局の薬剤師、今は福井県福井市でホームページ制作をやっている@ジョウです。

今回の記事は、querySelectorとquerySelectorAllの使い方をまとめました。備忘録としてまとめたので、勉強中の方は参考にしてください。

この記事の内容

querySelectorの基本形
querySelectorAllの基本形
querySelectorAllの出力方法

querySelectorの基本形

querySelectorの基本形は以下の通り。imgを取り出した例です。

<img src="1" alt="">

<script>
const element = document.querySelector('img');
console.log(element);

</script>

//結果
<img src="1" alt="">

const element = document.querySelector('img');

console.log(element);

</script>

//結果

クラスを引数にしてもOKです。ただ、同じものが2つある場合は、最初に書かれているものを取得します。

<div class="test">a</div>
<div class="test">b</div>
  
 
 <script>
    const element = document.querySelector('.test');
    console.log(element);
  </script>

//結果
<div class="test">a</div>

const element = document.querySelector('.test');

console.log(element);

</script>

//結果

querySelectorAllの基本形

すべての要素を取得したい場合は、querySelectorAllを使います。

   <div class="test1">a</div>
   <div class="test2">b</div>
    
    <script>
    const element = document.querySelectorAll('div');
    console.log(element);
    </script>

//結果
NodeList(2) [div.test1, div.test2]

const element = document.querySelectorAll('div');

console.log(element);

</script>

//結果

NodeList(2) [div.test1, div.test2]

NodeListというのはオブジェクトで、次の項目で出力方法を説明します。

querySelectorAllの出力方法

querySelectorAllは、length(数)とforを使って取り出します。

<div class="test1">a</div>
<div class="test2">b</div>

<script>
    const element = document.querySelectorAll('div');
    const length = element.length;

    for (let i = 0; i < length; i++){
    console.log('Text: ' + element.item(i).textContent);
    }
</script>

//結果
Text: a
Text: b