Javascript: querySelectorAll

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

순회가능한 유사배열로서, 대표적으로 length 속성과, forEach() 메소드를 가진다.

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

let title = document.querySelectorAll('.movie-title'); 
let review = document.querySelectorAll('.movie-review'); 

for(let i = 0; i < DATA.length; i++) {
    title[i].textContent = DATA[i].title; 
    review[i].textContent = DATA[i].review; 
}

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

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

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