ホームページ  >  記事  >  ウェブフロントエンド  >  querySelectorAll() を使用するときに、querySelector が最初の要素のみを選択するのはなぜですか?

querySelectorAll() を使用するときに、querySelector が最初の要素のみを選択するのはなぜですか?

Linda Hamilton
Linda Hamiltonオリジナル
2024-11-07 08:17:02516ブラウズ

Why does querySelector only select the first element when using querySelectorAll()?

querySelector が最初の要素のみを選択するのはなぜですか?これを修正するにはどうすればよいですか?

querySelectorAll() メソッドがセレクターで使用されている場合複数の要素を選択すると、ノードのリストが返されます。

提供されたコードでは、querySelectorAll() を使用してクラス「weekdays」を持つすべての要素を選択しています。問題は、コードの後半で querySelector() を使用して、リスト内の各要素にイベント リスナーを追加していることです。これは、リスト内の最初の要素のみを対象としています。

この問題を解決するには、以下を使用する必要があります。 forEach() を使用して、リスト内の各要素を反復処理し、各要素にイベント リスナーを追加します。

更新されたコードは次のとおりです:

document.querySelectorAll(".weekdays").forEach(elem => elem.addEventListener("click",
 () => {
    document.querySelector(".bg-modal").style.display = "flex";
  }));

以上がquerySelectorAll() を使用するときに、querySelector が最初の要素のみを選択するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。