querySelector()とquerySelectorAll()

CSS のセレクタ形式で条件を指定して一致する要素を取得できるメソッドですが、違いがあるのでまとめてみました。

・querySelector()

指定したセレクターの条件と一致したHTML要素のうち最初のひとつを返します。
返り値は配列ではなく単一のデータとして返されます。

・querySelectorAll()

指定したセレクターの条件と一致したHTML要素を全て返します。
返り値は配列として返されます。

querySelector()から確認してみましょう。

　document.querySelector(selectors)

上記のように、タグ名やid属性、class属性の値を指定して取得できます。

たくさん要素があったとしても、一番最初のもの一つだけを返すのでそこは注意してください。

querySelectorAll()

document.querySelectorAll(selectors)

全ての要素を取得できます。

また上記のようにセレクタを空白で区切って記述することで、最初のセレクタに一致する要素の子孫要素の中で、次のセレクタに一致する要素を取得します。

これをfor~ofでループさせることも可能です。

const links = document.querySelectorAll("p a");

for (let link of links) {

console.log(link.href);

}

※これはHTTPプロトコルではなく、自分のローカルファイルになっています。