[JS] querySelector과 querySelectorAll

 

 

 

▶ querySelector()

• 선택자를 사용하는 첫 번째 요소만 반환한다.

document.querySelector(selectors);

 

 

 

▶ querySelectorAll()

elementList = parentNode.querySelectorAll(selectors);

 

• 지정된 셀렉터 그룹에 일치하는 다큐먼트의 엘리먼트 리스트를 나타내는 정적(살아 있지 않은) NodeList 를 반환한다.
• NodeList는 유사 배열 객체이다.
• 따라서 배열처럼 꺼내서 사용해야 한다.

var highlightedItems = userList.querySelectorAll(".highlighted");

highlightedItems.forEach(function(userItem) {
  deleteUser(userItem);
});

 

 

• 유사 배열 객체는 'Array.from()'을 사용해 배열로 만들 수 있다.

NodeList를 Array.from()을 사용해서 Array로 변환