35 CSS 선택자를 이용해서 엘리먼트 선택하기
지난 강에서는 엘리먼트의 태그 이름이나 클래스 이름 또는 이름 속성을 활용해서 DOM 엘리먼트를 얻어 오는 방법을 배웠습니다. 이번 강에서는 엘리먼트를 선택하는 방법 중 하나인 CSS 선택자(selector)를 활용하는 방법을 배워 보겠습니다.
선택자를 활용하면 매우 편하게 엘리먼트를 얻어 올 수 있습니다. document.querySelector()와 document.querySelectorAll() 메서드에서 원하는 엘리먼트를 나타내는 패턴을 선택자로 넘기면 DOM에서 해당 조건을 만족하는 엘리먼트를 반환합니다.
선택자 패턴은 CSS 문법과 같습니다. ID에는 샵(#)을 붙여 쓰고, 태그 이름은 그대로 쓰고, 클래스 이름에는 마침표(.)를 붙여서 씁니다.
메서드 이름에서 알 수 있듯이 querySelector()는 엘리먼트를 한 개만 반환하고 querySelectorAll()은 조건에 만족되는 엘리먼트를 모두 반환합니다.
콘솔에서 직접 확인해 보겠습니다.