DOMのquerySelector()とquerySelectorAll()の使い分け - プログラミング言語初心者はスクリプト言語オススメ！

JavaScriptのDOMでquerySelector()とquerySelector()ALLはどう使い分けるのか？って疑問が湧きますよね。

なおDOMの基礎についてはこちらに書いてます。
https://program1.publog.jp/archives/18516416.html

【結論】

querySelector()は指定したセレクターの条件と一致したHTML要素のうち最初のひとつを返します。

一方でquerySelectorAll()は指定したセレクターの条件と一致したHTML要素を全て返します。

【理由】

基本はdocument.querySelector()はHTML はid属性の値、class属性の値、要素名などでHTML要素を取得して、取得した値の最初の一つを引数で返します。

document.querySelectorAll()を取得する値が一つでなく指定した値が一致すれば全て取得し引数で返します。

大まかに取得する値が単一か複数かの違いです。

【具体例】

querySelectorで見ていきましょう。

あいうえお

かきくけこ

さしすせそ

console.log(document.querySelector(".A").innerHTML);

> あいうえお

これはclass="A"がたくさんありますがquerySelectorは単一の最初の値しか取得出来ないために最初の

あいうえお

のあいうえおを取得して引数で返してます。

querySelectorAll()は

あいうえお

かきくけこ

さしすせそ

console.log(document.querySelector All(".A").innerHTML);

> あいうえお
かきくけこ
さしすせそ

querySelectorAll()は指定した値を全て引数で返しますのでコード内のclass="A"の値を全て出力します。

【結論】

JavaScriptのquerySelectorは一致した最初の要素を取得、querySelectorAllは一致した全ての要素を取得します。

ぜひともしっかり身につけて自身のプログラミングに生かしてください。

取材やお仕事紹介などはこちらからお気軽にご連絡下さい。
ysa7825@gmail.com