querySelectorAll element click event 적용 방법

<vanilla coding prep 과제 중>

document.querySelectorAll로 가져온 엘리멘트에 addEventListener을 사용하여 클릭 이벤트를 적용하려고 했을 때 에러가 발생했다.

document.querySelectorAll은 단일 DOM객체를 가져오는 getElementById와는 달리 정적 NodeList(Node's collection)를 반환한다.

NodeCollection은 숫자 인덱스와 length property를 가지고 있다. 따라서 각각 요소에 이벤트를 적용시켜야한다.

for문으로 각각 요소에 이벤트를 적용시키는 방법

1. 
const tds = document.querySelectorAll("td")

for (let i = 0; i < tds.length; i++) {
	tds[i].addEventListener("click", ...)
    }

2. 
const tds = document.querySelectorAll("td")

for (cosnt td of tds) {
	td.addEventListener("click", ...)
    }