[CSS] Selector - querySelector

querySelector

• querySelector는 특정 name, id, class를 제한하지 않고, css 선택자를 사용하여 요소를 찾는다.
• 같은 id 또는 class 일 경우 스크립트의 최상단 요소만 로직에 포함된다.

  querySelector(#id) => id를 가진 요소를 찾는다.
  querySelector(.class) => class를 가진 요소를 찾는다.

querySelectorAll

• querySelectorAll은 선택자를 선택하여 배열과 비슷한 객체인 nodeList를 반환한다.
• 반환객체가 nodeList이기에 for문이나 forEach문을 이용한다.
• ,를 사용하면 여러 요소를 한 번에 가져올 수 있다.
  - querySelectorAll("#id,.class");
  
  
  

네이버 메인화면에서 특정 리스트의 제목만 가져오기

실습 1

• 오늘 읽을만한 글 - 리빙의 첫번째 페이지 게시물들의 제목 가져오기
  

• 해당 페이지에서 오른쪽 클릭 - 검사
  

• 필요한 데이터 추출

const titles = [];

document.querySelectorAll('#NM_THEME_CONTAINER [data-page="1"].group_theme .theme_item')
  .forEach(el => {
    if ( el.querySelector('.title') ) {
        const title = el.querySelector('.title').innerText;
        titles.push(title);
    }
  });

console.log(titles);

• Console에서 출력해보기
  

실습 2

• 반갑다! 쇼핑뉴스에서 리스트들의 제목 가져오기
  

• 해당 페이지에서 오른쪽 클릭 - 검사
  

• 필요한 데이터 추출

const titles = [];

document.querySelectorAll('#goodsItem_Z01003 .event_item ')
  .forEach(el => {
    if ( el.querySelector('.title') ) {
        const title = el.querySelector('.title').innerText;
        titles.push(title);
    }
  });

console.log(titles);

• Console에서 출력해보기