`querySelector`가 첫 번째 요소만 선택하는 이유와 해결 방법은 무엇입니까?

querySelector가 첫 번째 요소만 선택하는 이유와 해결 방법

querySelector를 사용할 때 첫 번째 요소만 선택한다는 점을 기억하는 것이 중요합니다. 문서에서 일치하는 요소입니다. 동일한 클래스 또는 ID를 가진 요소가 여러 개 있는 경우 첫 번째 요소만 반환됩니다.

귀하의 경우 달력의 날짜를 나타내는 동일한 클래스의 평일 버튼이 여러 개 있습니다. . 그 중 하나를 클릭하면 querySelector가 첫 번째 노드만 선택하기 때문에 작동하지 않습니다.

해결책 대신 querySelectorAll을 사용하면 모든 노드 목록이 반환됩니다. 일치하는 요소. 그런 다음 목록을 반복하고 각 항목에 이벤트 리스너를 연결할 수 있습니다.

정정된 코드는 다음과 같습니다.

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

이렇게 하면 평일 수업이 포함된 각 요소에 이벤트 리스너가 연결됩니다. 어떤 날짜든 클릭하면 양식이 열릴 수 있습니다.

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