18.5 DOM 요소쿼리

getElementById, getElementsByClassName, getElementsByTagName도 유용하긴 하지만, ID나 클래스, 태그 이름 같은 한 가지 조건이 아니라 다른 요소와의 관계를 사용해 원하는 요소를 찾는 훨씬 더 강력하고 범용적인 메서드도 있습니다.
querySelector와 querySelectorAll은 CSS 선택자를 사용해 요소를 찾는 메서드입니다.

CSS 선택자는 <p>, <div> 같은 요소 이름, ID, 클래스, 클래스의 조합, 요소 이름과 클래스의 조합 등 다양한 방식으로 요소를 찾습니다.
CSS 선택자에서 요소 이름을 사용할 때는 꺾쇠 없이 요소 이름만 씁니다.
즉 a는 DOM에 있는 <a> 요소를 찾고, br은 <br> 요소를 모두 찾습니다.
클래스로 요소를 찾을 때는 클래스 이름 앞에 점을 찍습니다.
즉, .callout은 클래스가 callout인 요소를 모두 찾습니다.
클래스 여러 개를 사용할 때는 찾으려는 클래스 앞에 모두 점을 찍습니다.
즉, .callout.fancy는 callout 클래스와 함께 fancy 클래스도 있는 요소를 찾습니다.
이들은 모두 조합할 수 있습니다.
예를 들어 a#callout2.collout.fancy는 ID가 callout2인 동시에 callout과 fancy 클래스가 모두 있는 <a> 요소를 찾습니다(요소 이름과 ID, 클래스를 모두 사용하는 선택자를 쓰는 경우는 극히 드물지만, 가능하긴 합니다).

CSS 선택자를 연습하는 가장 좋은 방법은 이 장에서 만든 샘플 HTML을 브라우저에서 열고, 브라우저 의 콘솔에서 querySelectorAll 메서드와 함께 사용해 보는 겁니다.
예를 들어 콘솔에서 document.querySelectorAll('.callout') 명령을 내려 보십시오.
이 섹션에서 사용하는 예제는 querySelectorAll에서 최소한 하나 이상의 결과가 나옵니다.

지금까지는 원하는 요소를 찾을 때 DOM에서의 위치와 관계없이 찾았지만, CSS 선택자를 사용하면 위치를 기준으로 요소를 찾을 수도 있습니다.

요소선택자 사이에 스페이스를 넣으면 특정 노드의 자손인 요소를 찾을 수 있습니다.
예를 들어 #content p는 ID가 content인 요소의 자손인 <p> 요소를 선택합니다.
마찬가지로 #content div p는 ID가 content인 요소의 자손인 <div> 요소의 자손인 <p> 요소를 선택합니다.

요소 선택자 사이에 > 기호를 넣으면 자손이 아니라 자식만 선택합니다.
예를 들어 #content > p는 ID가 content인 요소의 자식인 <p> 요소만 선택합니다.

더 복잡한 선택자도 있지만, 여기서는 가장 널리 쓰는 선택자만 설명합니다.
CSS 선택자 전체를 알아보려면 MDN 문서 http://mzl.la/1Pxcg2f를 읽어보십시오.