querySelectorAll()

クエリセレクターオール（DOM操作）

意味複数要素を取得

querySelectorAll()とは？

querySelectorAllメソッドは、指定したCSSセレクタに一致するすべての要素をドキュメントから取得します。

querySelectorAll()の具体的な使い方

クラス名を持つ全ての段落要素を取得し表示する例

<button onclick='showAllElementsWithClass()'>querySelectorAllの使用例</button>
<script>
function showAllElementsWithClass() {
  let elements = document.querySelectorAll('p.myClass');
  let textContents = Array.from(elements).map(el => el.textContent);
  alert('myClassクラスを持つ段落: ' + textContents.join(', '));
}
</script>
<p class='myClass'>段落1</p>
<p class='myClass'>段落2</p>

クラス'myClass'を持つ<p>要素を全て取得し、それらのテキスト内容を配列に保存し、最後に配列の内容をアラートで表示します。

複数の要素に対して操作を行う例

let elements = document.querySelectorAll('.highlight');
elements.forEach((el, index) => {
  el.style.backgroundColor = 'yellow';
  el.textContent += ` (項目${index + 1})`;
});
console.log('ハイライトされた要素の数:', elements.length);

👇出力結果

ハイライトされた要素の数: 3

クラス'highlight'を持つ全ての要素を取得し、背景色を黄色に変更し、テキストに番号を追加します。最後に、ハイライトされた要素の数をコンソールに出力します。

querySelectorAll()に関するよくある質問

Q. 返り値は配列ですか？

A. いいえ、querySelectorAllの返り値は配列ではなく、NodeListオブジェクトです。配列のメソッドを使用したい場合は、Array.from()で配列に変換する必要があります。

Q. 動的に更新されますか？

A. いいえ、querySelectorAllは静的なNodeListを返します。DOM変更後に新しい要素を取得するには、再度querySelectorAllを呼び出す必要があります。

Q. 一致する要素がない場合は？

A. 一致する要素がない場合、空のNodeListを返します。エラーは発生しません。

Q. パフォーマンスへの影響は？

A. querySelectorAllは非常に高速ですが、大規模なDOMで頻繁に使用する場合はパフォーマンスに影響を与える可能性があります。必要な場合は結果をキャッシュすることを検討してください。

querySelectorAll()が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのquerySelectorAll()やdataset、classList、classList.toggle()、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。