JavaScriptで特定の要素を操作したい場合、DOMの要素を取得する必要があります。その際に非常に便利なのがdocument.querySelectorAll()です。今回は、このメソッドの基本的な使い方や注意点についてまとめていきたいと思います。
目次 非表示
querySelectorAll()は、指定したCSSセレクターに一致するすべての要素をNodeListとして返すメソッドです。
- 複数の要素を取得できる：CSSセレクターを使って、ページ内の複数の要素を一括で取得できます。
- 静的なリストを返す：返されるNodeListは静的なリストであり、DOMが変更されても自動的に更新されません。
以下の例では、クラス名がexampleのすべての要素を取得します。
See the Pen Untitled by tones (@tonescodedesign) on CodePen.
JavaScript
const elements = document.querySelectorAll('.example');
elements.forEach((element, index) => {
console.log(`要素${index + 1}: ${element.textContent}`);
});
// コンソールログ出力:
// 要素1: 1つ目の要素
// 要素2: 2つ目の要素
// 要素3: 3つ目の要素HTML
<div class="example">1つ目の要素</div>
<div class="example">2つ目の要素</div>
<div class="example">3つ目の要素</div>指定したタグ名の要素をすべて取得します。
JavaScript
const paragraphs = document.querySelectorAll('p');
console.log(paragraphs.length); // ページ内の<p>要素の数を出力クラス名を使って一致する要素を取得します。
JavaScript
const buttons = document.querySelectorAll('.btn');
buttons.forEach(button => {
button.style.backgroundColor = 'blue'; // ボタンの背景色を青に変更
});IDを指定して一致する要素を取得します。
JavaScript
const mainContent = document.querySelectorAll('#main');
console.log(mainContent[0].textContent); // 最初の要素のテキストを出力CSSセレクターを組み合わせて条件を指定できます。
JavaScript
const listItems = document.querySelectorAll('ul > li.active');
listItems.forEach(item => {
console.log(item.textContent); // <ul>内の.activeクラスを持つ<li>要素を出力
});querySelectorAll()が返すNodeListは配列のように見えますが、配列ではありません。そのため、forEach()メソッドは使用できますが、map()やfilter()などの配列メソッドは使用できません。
例：配列に変換する方法
JavaScript
const elements = document.querySelectorAll('.example');
const elementsArray = Array.from(elements); // 配列に変換
// またはスプレッド構文を使用
const elementsArray2 = [...elements];querySelectorAll()で取得したNodeListは静的なリストであり、DOMが変更されてもリストには反映されません。
例：新しい要素を追加してもリストには含まれない
JavaScript
const listItems = document.querySelectorAll('li');
// <ul>に新しい<li>を追加
const ul = document.querySelector('ul');
ul.innerHTML += '<li>新しいアイテム</li>';
console.log(listItems.length); // 元の数のまま（新しく追加した<li>は含まれない）取得した要素を動的に操作する場合、スクリーンリーダーなどの支援技術が変化を認識できるように配慮する必要があります。
- ARIA属性を追加する：重要な変更がある場合は、
aria-liveやroleを適切に設定しましょう。
JavaScript
const statusDiv = document.getElementById('status');
const button = document.getElementById('updateButton');
button.addEventListener('click', () => {
statusDiv.textContent = '状態が更新されました。';
});HTML
<div id="status" aria-live="polite">現在の状態</div>
<button id="updateButton">更新する</button>querySelectorAll()は、CSSセレクターを使って複数の要素を簡単に取得できる便利なメソッドです。しかし、以下の点に注意して使用しましょう。
- 返されるNodeListは配列ではないため、必要に応じて配列に変換する。
- 静的なリストを返すため、動的なDOM変更には対応しない。
