선택자Selector

선택자는 DOM 트리에서 원하는 요소를 가리키는 문법입니다. 원래는 CSS에서 어느 요소에 스타일을 입힐지 정할 때 쓰는 문법이라 CSS 선택자라고도 부릅니다. 크롤러는 같은 문법으로 어느 요소의 값을 꺼낼지 정합니다.

기본형 네 가지

• h3 (태그): 태그 이름이 h3인 요소를 모두 고릅니다. 추천 도서의 제목까지 세 개가 선택됩니다.
• .price (클래스): class="price"가 붙은 요소를 고릅니다. 점(.)으로 시작합니다.
• #best (아이디): id="best"인 요소 하나를 고릅니다. 샵(#)으로 시작하고, 아이디는 한 페이지에 하나만 있어야 합니다.
• article h3 (안에 있는 요소): 띄어 쓰면 "앞 요소 안에 있는 뒤 요소"라는 뜻입니다. aside 안의 h3는 빠지고 책 제목 두 개만 남습니다.

h3와 article h3의 차이가 중요합니다. 원하는 요소만 고르려면, 그 요소가 DOM의 어디에 있는지까지 선택자에 적어야 합니다.

아래 연습판에 선택자를 입력하면 화면과 DOM 트리에서 고른 요소가 함께 표시됩니다. 사이트 디자인 바꾸기를 누르면, 같은 선택자가 왜 빈 값을 돌려주게 되는지도 볼 수 있습니다.

자주 쓰는 조합

• h3.title: 태그와 클래스를 붙여 쓰면 두 조건을 모두 만족하는 요소만 고릅니다.
• article > h3: >는 바로 아래 자식만 고릅니다. 띄어쓰기는 몇 단계 아래에 있든 고릅니다.
• a[title]: 대괄호는 속성입니다. title 속성이 있는 a만 고릅니다.

선택자는 CSS, 크롤러(BeautifulSoup의 select), 브라우저의 JavaScript(document.querySelectorAll)에서 모두 같은 문법으로 씁니다. 한 번 익히면 세 곳에서 다 쓸 수 있습니다.

오래 쓸 수 있는 선택자

사이트가 디자인을 바꿔도 계속 쓸 수 있는 선택자를 고르는 기준이 있습니다.

• 순서로 고르지 않습니다. div:nth-child(3)처럼 순서를 지정하면, 앞에 요소 하나만 생겨도 다른 요소를 가져옵니다.
• 자동으로 만들어진 이름을 피합니다. css-1x9f2k처럼 뜻 없는 글자가 섞인 클래스는 사이트를 새로 배포할 때마다 바뀔 수 있습니다.
• 뜻을 담아 붙인 이름을 씁니다. #price, .product-title 같은 이름은 디자인을 고친 뒤에도 남아 있는 경우가 많습니다.

"이 선택자를 고른 이유를 DOM 구조로 설명해 줘. 순서나 자동으로 만들어진 클래스에 기대는 부분이 있으면 바꿔 줘."