【JavaScript】「document.querySelectorAll()」の使い方！【分かりやすい】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

今回はJavaScriptからHTMLの要素を取得するときに便利な「document.querySelectorAll()」について、使い方やその特徴の解説をします。

初心者にも分かりやすいように解説するので、これを読めばスムーズに利用できるはずです！

また、下の動画でも「document.querySelectorAll()」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

「document.querySelectorAll()」を使うと何ができる？

「document.querySelectorAll()」は指定したCSSのセレクターに一致する要素を「すべて」取得するためのメソッドです。

複数の要素を一気に取得してJavaScriptから操作したい場合に非常に有用です。

例えば、「複数のボタン」や「リストアイテム」を一括で操作したい場合に適しています。

const elements = document.querySelectorAll('.example');
elements.forEach(element => {
    console.log(element.textContent);
});

上記は「class=‘example’」が付けられた要素をすべて取得する例になります。

この例では、「.example」クラスに一致するすべての要素が取得され、それぞれの要素の内容がコンソールに出力されます。

「forEach()」については下記の記事でその使い方の解説をしているので、気になる方はこちらからどうぞ！

「document.querySelector()」との違い

「document.querySelector()」は、CSSセレクターに一致する「最初の要素」を取得するメソッドです。これに対し、「document.querySelectorAll()」は一致する「すべて」の要素を取得します。

例えば、下記のようなHTMLがあるとします。

<div class="example">Item 1</div>
<div class="example">Item 2</div>
<div class="example">Item 3</div>

const element = document.querySelector('.example');
console.log(element.textContent); // Item 1

最初の要素「Item 1」しか取得されません。

const elements = document.querySelectorAll('.example');
elements.forEach(element => {
    console.log(element.textContent);
});
// 結果:
// Item 1
// Item 2
// Item 3

すべての要素が取得されます。

厳密には返り値は「NodeList」である。

「document.querySelectorAll()」」の返り値は、厳密には「NodeList」と呼ばれるもので、「配列」とは異なります。

まとめると、下記が言えます。

• Arrayではない：NodeListはArrayとは異なるので、一部のArrayメソッドは使えません。
• forEachは使える：NodeListは「forEach()」をサポートしています。

参考リンク！

仕様書。
https://dom.spec.whatwg.org/#ref-for-dom-parentnode-queryselectorall%E2%91%A0

https://dom.spec.whatwg.org/#interface-nodelist

MDN。
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll

https://developer.mozilla.org/ja/docs/Web/API/NodeList

おすすめの再生リスト！

こちらは僕が制作したYouTubeの再生リスト「JavaScriptの入門編」です。

「JavaScriptの入門編」はWeb制作を勉強している方がJavaScriptに入門する際に知っておきたい情報をまとめたコンテンツとなります。

こちらの再生リストで「JavaScript」について「丁寧」に解説しているので、もし気になる方はチェックしてみてください！一緒に楽しく学習しましょう！！

まとめ！

「document.querySelectorAll()」は、CSSセレクターに一致する要素をすべて取得できる。

「document.querySelector()」は、一致する最初の要素のみ取得する。

返り値のNodeListは、「forEach()」などを使えるがArrayとは異なる。

「document.querySelectorAll()」を活用することで、コードを簡潔に書くことができるので、ぜひ実際に使ってみてください！

また、下の動画でも「document.querySelectorAll()」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それではまた！