【Javascript】querySelectorAllで要素を取得し、addEventListenerでイベント処理をする

2023.11.06(Mon)

Web制作

querySelectorAll と addEventListener は、JavaScript でよく使われる2つのメソッドです。

querySelectorAll は、HTMLドキュメントから要素を取得するのに使用され、addEventListener は、要素にイベントリスナーを追加するのに使用されます。

よく使うのが getElementById で1つの特定要素を取得し、addEventListener でイベント処理をする方法です。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
</head>

<body>

    <input type="button" id="button" value="ボタン">

</body>

</html>

// #buttonボタンをクリックしたときに、テキストを表示する
const button = document.getElementById("button");
button.addEventListener("click", function() {
    console.log("ボタンがクリックされました");
});

これと同じ要領で querySelectorAll で複数の要素を取得し、addEventListener でイベント処理をしようとしても上手くいきません。

どうやら querySelectorAll で取得できる値は NodeListオブジェクトといって addEventListener が使えないようです。。

それではどうやったら複数の要素に対してイベントを処理ができるのでしょうか。

forEachでループする

querySelectorAll で複数の要素を取得し、その結果を forEach でループして、各要素に addEventListener を追加することができます。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
</head>

<body>

    <div class="tab">タブ</div>
    <div class="tab">タブ</div>
    <div class="tab">タブ</div>
    <div class="tab">タブ</div>
    <div class="tab">タブ</div>

</body>

</html>

// .tabをクリックしたときに、テキストを表示する
const tabs = document.querySelectorAll("div.tab");
tabs.forEach(function(tab) {
    tab.addEventListener("click", function() {
        console.log("タブがクリックされました");
    });
});