JavaScriptのquerySelectorAll()関数の使い方

定義と使用方

querySelectorAll()関数は、
HTMLドキュメントまたは特定の要素内で指定されたCSSセレクターに一致するすべての要素を返します。

HTMLドキュメントまたは特定の要素内で、CSSセレクターに一致するすべての要素をNodeListオブジェクトのリストとして返します。
このリストは配列に似た構造を持っています。このリスト内の要素は、ループ処理を通じて特定の操作を実行することができます。
する要素が存在しない場合は、空のNodeListオブジェクトを返します。

基本の例

JavaScript

const liElements = document.querySelectorAll("li");  // liセレクターに一致するすべての要素を取得
console.log(liElements); // NodeList(3) [li, li, li]

// 配列に似た構造のため length プロパティを使用可能
let liElementsLength = liElements.length;

// ループ処理で要素にアクセス
for (let i = 0; i < liElementsLength; i++) {
    console.log(liElements[i].textContent);
}
// 出力: "おにぎり" "ラーメン" "うどん"

コード補足説明
lengthプロパティは、文字列、配列、配列に似た構造の長さを返します。

コード補足説明
forループは、特定の回数や範囲だけ繰り返し処理を行う文です。配列や配列に似た構造にも適用できます。

コード補足説明
textContentプロパティは、HTML要素のテキストコンテンツを取得または設定します。

構文

JavaScript

// HTMLドキュメント全体から
document.querySelectorAll(selectors)

// 特定の要素オブジェクト内から
element.querySelectorAll(selectors)

パラメーター

querySelectorAll()関数のパラメーター
`selectors`	文字列形式の有効なCSSセレクターです。

戻り値

HTMLドキュメントまたは特定の要素オブジェクト内で、CSSセレクターに一致するすべての要素をNodeListオブジェクトのリストとして返します。
（このリストは静的であり、DOMの変更をリアルタイム（または live）で反映しません）
一致する要素が存在しない場合は、空のNodeListオブジェクトを返します。

説明

querySelectorAll()関数の実装方法と機能について説明します。

HTMLドキュメント全体で要素を検索

HTMLドキュメント（documentオブジェクト）全体で、すべての<p>要素を検索するには、次の例のように記述できます。

特定の要素オブジェクト内で要素を検索

HTMLの特定の要素内で、すべての<p>要素を検索するには、次の例のように記述できます。

JavaScript

let container = document.querySelector(".container"); // 特定の要素オブジェクトです。

let matches = container.querySelectorAll("p"); // 特定の要素オブジェクト内で要素を検索
/* let matches = document.querySelectorAll(".container p"); と同じ戻り値です。 */

コード補足説明
querySelector()関数は、HTMLドキュメントまたは特定の要素内で指定されたCSSセレクターに一致する最初の要素オブジェクトを返します。

この例では、特定の親要素オブジェクト内でも使用できることを示しています。

ループ処理を通じて検索した要素を操作

CSSセレクターに一致するすべての要素をNodeListオブジェクトのリストとして返します。
このリストは配列に似た構造を持っています。
このリスト内の要素は、ループ処理を通じて操作することができます。

NodeListは配列に似たオブジェクトであり、for...of文でループ処理可能なオブジェクトです。
lengthプロパティを使用して、配列に似たオブジェクトであるNodeListの長さを取得できます。

次の例は、querySelectorAll()関数でHTMLドキュメント内の<li>要素を検索し、ループ処理を通じて特定の操作を行う例です。

HTML

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>querySelectorAll()関数</title>     
    </head>
    <body>
        <ul>
            <li>おにぎり</li>
            <li>ラーメン</li>
            <li>うどん</li>
        </ul>
        <script src="queryselectorall.js"></script>
    </body>
</html>

Javascript - queryselectorall.js

const liElements = document.querySelectorAll("li");  // liセレクターに一致するすべての要素を取得
console.log(liElements); // NodeList(3) [li, li, li]

/*
 * このリストは配列に似た構造を持っています。
 * このリスト内の要素は、ループ処理を通じて特定の操作を実行できます。
*/

/* 方法 1 - for...of 文を適用 */
for (const liElement of liElements) {
    console.log(liElement.textContent);
}
// 出力: "おにぎり" "ラーメン" "うどん"

/* 方法 2 - for 文を適用 */
for (let i = 0; i < liElements.length; i++) { // length プロパティを使用可能
    console.log(liElements[i].textContent);
}
// 出力: "おにぎり" "ラーメン" "うどん"

/* 方法 3 - forEach() 関数を適用 */
liElements.forEach(li => { // 配列に似ていますが forEach() 関数を適用可能
    console.log(li.textContent);
});
// 出力: "おにぎり" "ラーメン" "うどん"

querySelectorAll()関数が返すNodeListオブジェクトは、配列に似た構造を持っています。
NodeListオブジェクトは、配列のようにインデックスを使用して要素にアクセスでき、lengthプロパティで要素の数を確認できます。しかし、NodeListオブジェクトは本物のJavaScript配列ではなく、配列に似た（iterable）オブジェクトです。

NodeListオブジェクトは配列のように扱うことはできますが、本物の配列のように配列メソッド（push()、pop()など）を使用することはできません。

しかし、配列に似た構造であるにもかかわらず、配列をループ処理するときに使用するforEach()関数は使用可能です。

状況別の例

状況別の例を通して、querySelectorAll()関数の実装方法について見ていきます。

特定のクラス名を持つすべての要素にスタイルを適用する

JavaScript

const highlightedElements = document.querySelectorAll(".highlight");
const elementsLength = highlightedElements.length;

for (let i = 0; i < elementsLength; i++) {
    highlightedElements[i].style.backgroundColor = "yellow";
    highlightedElements[i].style.color = "green";
}

この例では、クラス名が"highlight"のすべての要素を選択し、これらの要素のスタイルを変更します。

特定の要素タイプに関する情報を出力する

JavaScript

const listItems = document.querySelectorAll("#my-list li");
const itemsLength = listItems.length;

for (let i = 0; i < itemsLength; i++) {
    console.log("項目 " + (i + 1) + ": " + listItems[i].textContent);
}

この例では、idが"my-list"のリスト要素内のすべての<li>要素を選択し、各要素のテキスト内容をコンソールに出力します。

リンクリストにイベントリスナーを追加する

JavaScript

const linkList = document.querySelectorAll("#my-links a");
const linksLength = linkList.length;

for (let i = 0; i < linksLength; i++) {
    linkList[i].addEventListener("click", function(event) {
        event.preventDefault();
        alert("リンクがクリックされました！");
    });
}

この例では、idが"my-links"のリスト内のすべてのリンク（<a>）要素を選択し、各リンクにクリックイベントリスナーを追加します。リンクをクリックすると、アラートメッセージが表示されます。

一致する要素が存在しない場合は、空の`NodeList`オブジェクトを返します

HTML

<!DOCTYPE html>
<html lang="ja"> 
    <head>
        <title>querySelectorAll()の例</title>
    </head>
    <body>
        <div id="myElement">この要素を選択できます。</div>
        <script>
            const nonExistentElement = document.querySelectorAll("#nonExistentElement");
            
            if (nonExistentElement.length === 0) { // lengthプロパティでNodeListオブジェクトの長さにアクセス可能
                console.log("一致する要素はありません。");
            } else {
                console.log("一致する要素が見つかりました。");
            }
        </script>
    </body>
</html>

この例では、idが"nonExistentElement"に設定された要素は存在しないため、querySelectorAll()で選択した#nonExistentElementセレクターは一致する要素がなく、空のNodeListを返します。その後、JavaScriptでif...else文を使用して結果を確認し、コンソールにメッセージを出力します。結果は「一致する要素はありません。」となります。

DOMの変更をリアルタイム（または live）で反映しない

HTML

<!DOCTYPE html>
<html lang="ja"> 
    <head>
        <meta charset="UTF-8">
        <title>NodeList</title>     
    </head>
    <body>
        <ul id="list">
            <li>おにぎり</li> 
            <li>ラーメン</li> 
            <li>うどん</li> 
        </ul>
        <p><li> 要素の数: <strong id="li-length-val">3</strong></p>
        <button type="button" id="addButton">新しいメニューを追加</button>
        <script src="none-live.js"></script>
    </body>
</html>

JavaScript - none-live.js

// <li>要素を取得
const liElements = document.querySelectorAll("li");

// ボタンクリック時に新しい<li>要素を追加
document.getElementById("addButton").addEventListener("click", () => {
    const newLi = document.createElement("li");
    newLi.textContent = '新しいメニュー';

    // 新しい<li>要素を<ul>に追加
    document.getElementById("list").appendChild(newLi);

    // <li>要素の数をリアルタイムで確認
    const liElementsLength = liElements.length; // すでに宣言したliElementsのlengthはリアルタイムでは反映されない
    document.getElementById("li-length-val").textContent = liElementsLength;
});

コード補足説明
getElementById()関数は、HTMLドキュメント内で指定された文字列と一致するid属性を持つ要素オブジェクトを返します。

新しい要素を追加しても、querySelectorAll()関数はリアルタイム（または live）で反映されないため、<li>要素の数が変わらないことを確認できます。

仕様書

querySelectorAll()関数の仕様書
仕様書
`querySelectorAll()`	DOM Standard #ref-for-dom-parentnode-queryselectorall①

ブラウザ互換性

querySelectorAll()関数のブラウザ互換性
関数	デスクトップ Chrome	デスクトップデスクトップ Edge	デスクトップ Firefox	Safari
`querySelectorAll()`	1	12	3.5	3.1

参考資料

codingCourses：JavaScript querySelectorAll() Function – A Complete Guide

定義と使用方

基本の例

構文

パラメーター

戻り値

説明

HTMLドキュメント全体で要素を検索

特定の要素オブジェクト内で要素を検索

ループ処理を通じて検索した要素を操作

状況別の例

特定のクラス名を持つすべての要素にスタイルを適用する

特定の要素タイプに関する情報を出力する

リンクリストにイベントリスナーを追加する

一致する要素が存在しない場合は、空のNodeListオブジェクトを返します

DOMの変更をリアルタイム（または live）で反映しない

仕様書

ブラウザ互換性

参考資料

関連項目

一致する要素が存在しない場合は、空の`NodeList`オブジェクトを返します