JavaScriptのquerySelector()関数の使い方

定義と使用方

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

一致する要素が存在しない場合は、nullを返します。

基本の例

JavaScript

// HTMLドキュメント内で最初のクラス名が「.item」の要素を選択
const firstItem = document.querySelector(".item");

// 特定の要素内で選択
const container = document.getElementById("container");
const nestedButton = container.querySelector("button.primary");

// 一致する要素が存在しない場合
const notExist = document.querySelector(".no-such-class"); // nullを返す

構文

パラメーター

querySelector()関数のパラメーター
`selectors`	選択したい要素のオブジェクトです。有効なCSSセレクター文字列で指定する必要があります。指定しない場合は、`TypeError`が発生します。

戻り値

Documentオブジェクト（ドキュメント全体）で呼び出した場合は、ドキュメント内で指定したCSSセレクターに一致する最初の要素オブジェクトを返します。
Elementオブジェクト（特定の要素）で呼び出した場合は、その特定の要素内で指定したCSSセレクターに一致する最初の要素オブジェクトを返します。
一致する要素が存在しない場合は、nullを返します。

参考にしてください！
指定したセレクターに一致するすべての要素のリストが必要な場合は、querySelectorAll()関数を使用してください。

例

querySelector()関数の使い方を例を通して確認してみましょう。

特定の要素内で要素を探す

特定の要素内で（例の場合は <div class="container">）、最初の <p> 要素を探すには、次の例のように記述できます。

JavaScript

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

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

要素のスタイルを変更する

この例では、querySelector()関数を使用して、ドキュメント内でidが"my-element"の要素を選択し、選択した要素のスタイルを変更します。

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

JavaScript

const button = document.querySelector("#my-button");

button.addEventListener("click", () => {
    alert("ボタンがクリックされました！");
});

この例では、querySelector()関数を使用して、ドキュメント内でidが"my-button"のボタン要素を選択し、そのボタンにクリックイベントリスナーを追加します。ボタンがクリックされるとメッセージが表示されます。

動的に内容を追加する

JavaScript

const myList = document.querySelector("#my-list");
const items = ["項目 1", "項目 2", "項目 3"];
const itemsLength = items.length;

for (let i = 0; i < itemsLength; i++) {
    let listItem = document.createElement("li");
    listItem.textContent = items[i];
    myList.appendChild(listItem);
}

コード補足説明
for文は、特定の回数や範囲だけ繰り返すループ文です。

コード補足説明
createElement()関数は、新しいHTML要素を生成して返します。

コード補足説明
appendChild()関数は、ノードを特定のノードの最後の子として追加します。

この例では、querySelector()関数を使用して、ドキュメント内でidが"my-list"のリスト要素を選択し、JavaScriptを使用してリストに動的に項目を追加します。これは、動的にコンテンツを生成して追加する際に使用される一般的なパターンの一つです。

一致する要素が存在しない場合は`null`を返す

HTML

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>querySelector() 例</title>
    </head>
    <body>
        <div id="my-element">この要素を選択できます。</div>
        <script>
            const nonExistentElement = document.querySelector("#non-existent-element");
            
            if (nonExistentElement === null) {
              console.log("一致する要素がありません。");
            } else {
              console.log("一致する要素を見つけました。");
            }
        </script>
    </body>
</html>

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