querySelectorAllメソッドでaddEventListenersが機能しない理由と解決方法

2024-02-08 07:03 JavaScript イベントリスナー querySelectorAll

  1. NodeListオブジェクト: querySelectorAllメソッドは、要素のリストをNodeListオブジェクトとして返します。NodeListオブジェクトは、通常の配列とは異なるため、直接イベントリスナーを追加することはできません。

  2. 配列に変換する必要がある: NodeListオブジェクトを通常の配列に変換する必要があります。これにはいくつかの方法があります。例えば、Array.from()メソッドを使用するか、スプレッド演算子([...])を使用することができます。

const elements = document.querySelectorAll('セレクター');
const elementsArray = Array.from(elements);
elementsArray.forEach(element => {
  element.addEventListener('イベント名', 関数);
});

上記のコードでは、querySelectorAllで要素を取得した後、Array.fromを使用してNodeListオブジェクトを配列に変換しています。その後、forEachメソッドを使用して各要素に対してイベントリスナーを追加しています。

この方法を使用すると、querySelectorAllメソッドで取得した要素に対してイベントリスナーを追加することができます。