querySelectorAll과 foreach에 대해서

🙋🏻‍♀️ querySelectorAll 은 NodeList 를 반환한다. NodeList 란 ?

• 순회가능한 유사배열로서, 대표적으로 length 속성과, forEach() 메소드를 가진다.
  
  
  따라서 반복 구문을 사용하여, value 값에 접근할 수 있다. 하지만 엄밀히 말해 배열이 아니므로, reduce() 와 같은 Array.prototype 에 할당된 배열 고유의 속성과 메소드는 사용할 수 없다.

리스트 형태인 querySelectorAll 로 선택한 elements 들에는, 이벤트 리스너를 일괄 할당할 수 없다. 대신, 그 parent element 등 단일 요소에 이벤트 리스너를 할당하여, child element 를 event target 으로 잡고, 유저가 event target 을 trigger 한 순간, event bubbling 효과로 이벤트가 작동되도록 할 수 있다.

const movieList = document.querySelector('ul'); 

movieList.addEventListener('click', function (e) {
    if (e.target.classList.contains('.like')) {
        console.log('You like this movie!'); 
    }
}); // ul 안에 있는 리스트에서 like 클래스를 가진 요소를 누르면 이벤트가 작동한다.