このページでは、JavaScriptのquerySelectorとquerySelectorAllについて詳しく解説します。以下の見出しから各セクションにジャンプできます。

• querySelectorとは
• querySelectorAllとは
• 基本的な構文
• querySelectorの使用例
• querySelectorAllの使用例
• querySelectorとquerySelectorAllの違い
• パフォーマンスに関する注意点

querySelectorとは

querySelectorは、指定したセレクターに一致する最初の要素を返します。このメソッドはCSSセレクターを使用してHTML要素を検索するため、非常に柔軟で強力です。見つからない場合はnullを返します。

querySelectorAllとは

querySelectorAllは、指定したセレクターに一致するすべての要素を返します。返されるのはNodeListオブジェクトで、これは配列のようにループ処理が可能です。ただし、厳密には配列ではありません。

基本的な構文

どちらのメソッドも以下の構文で使用します。

// querySelector
const element = document.querySelector(selector);

// querySelectorAll
const elements = document.querySelectorAll(selector);
    

selectorにはCSSセレクターを指定します。

querySelectorの使用例

以下はquerySelectorの基本的な例です。

// IDで要素を選択
const header = document.querySelector("#main-header");

// クラスで要素を選択
const firstItem = document.querySelector(".list-item");

// タグ名で要素を選択
const firstParagraph = document.querySelector("p");

// 属性セレクターを使用
const checkbox = document.querySelector("input[type='checkbox']");
    

上記のコードでは、最初に一致する要素が取得されます。

querySelectorAllの使用例

以下はquerySelectorAllを使用した例です。

// 同じクラスを持つすべての要素を選択
const listItems = document.querySelectorAll(".list-item");

// タグ名で複数の要素を選択
const paragraphs = document.querySelectorAll("p");

// 属性セレクターを使用
const checkboxes = document.querySelectorAll("input[type='checkbox']");

// 選択した要素をループ処理
listItems.forEach(item => {
    console.log(item.textContent);
});
    

返されるNodeListはforEachを使用して簡単に操作できます。

querySelectorとquerySelectorAllの違い

大きな違いは、返される要素の数です。querySelectorは最初に一致した1つの要素を返し、querySelectorAllは一致したすべての要素を返します。また、querySelectorが返すのは単一の要素、querySelectorAllが返すのはNodeListである点も異なります。

パフォーマンスに関する注意点

querySelectorAllは一致するすべての要素を探すため、querySelectorよりも処理コストが高くなる場合があります。特に要素が多い場合や頻繁に呼び出す場合は、必要最小限の範囲で使用するよう心がけましょう。

また、NodeListは静的リストであるため、DOMの変更に追従しません。動的な変更に対応したい場合はgetElementsByClassNameやgetElementsByTagNameを検討することもできます。

以上がquerySelectorとquerySelectorAllの解説です。これらを活用して効率的にDOM操作を行いましょう。