`querySelector`가 첫 번째 요소만 선택하는 이유는 무엇이며 어떻게 해결할 수 있나요?

querySelector가 첫 번째 요소만 선택하는 이유는 무엇이며 어떻게 해결할 수 있나요?

querySelector 이해

JavaScript에서 querySelector 메서드는 첫 번째 요소를 선택합니다. 제공된 선택기 문자열을 기반으로 문서의 일치 요소입니다. 여러 요소가 선택기와 일치하는 경우 첫 번째 요소만 반환됩니다.

문제 설명

제공된 CodePen에서 querySelector를 사용하여 평일 클래스가 있는 요소를 선택합니다. 그러나 일치하는 첫 번째 요소만 클릭 이벤트를 트리거하고 다른 모든 요소는 그렇지 않다는 것을 알 수 있습니다.

해결책: 여러 요소에 querySelectorAll 사용

이 문제를 해결하려면 querySelectorAll을 사용해야 합니다. 대신 일치하는 모든 요소가 포함된 NodeList를 반환하는 메서드입니다. 그런 다음 NodeList를 반복하고 각 요소에 이벤트 핸들러를 연결할 수 있습니다.

수정된 코드:

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

설명:

• document.querySelectorAll( ".weekdays"): weekdays 클래스가 있는 모든 요소를 ​​선택하고 이를 NodeList.
• forEach: NodeList의 각 요소를 반복합니다.
• elem.addEventListener("click", ...): 클릭 이벤트 리스너를 각 평일 요소에 연결합니다. 이전과 동일한 코드로 양식 모달을 표시합니다.

이제 평일 요소를 클릭하면 모달이 올바르게 표시되어 querySelector에서 첫 번째 요소만 선택할 때 발생했던 문제를 해결했습니다.

위 내용은 `querySelector`가 첫 번째 요소만 선택하는 이유는 무엇이며 어떻게 해결할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!