querySelectorAllから返されたDOM要素のリストにクリックイベントを追加する方法

NodeListを繰り返し、各要素にイベントリスナーをアタッチする方法

によって返されるすべての要素にイベントリスナーを追加できますdocument.querySelectorAll()を使用してこれらの結果を反復処理して呼び出すfor..ofループ:

const buttons = document.querySelectorAll("#select .button")
for (const button of buttons) {
  button.addEventListener('click', function(event) {
    //...
  })
}

注意することが重要ですdocument.querySelectorAll()配列は返しませんが、NodeListオブジェクトを返します。

あなたはそれを繰り返すことができますforEachまたはfor..of、またはで配列に変換できますArray.from()お望みならば。

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のブラウザチュートリアル: