쿼리 셀렉터(query selector)는 웹 페이지의 특정 HTML 요소를 선택하는 데 사용되는 도구다.
자바스크립트에서 쿼리 셀렉터를 사용하면 CSS 선택자와 유사한 구문을 사용하여 원하는 요소를 쉽게 찾고 조작할 수 있다.
구조
참조객체.querySelector() 형식이다. 일반적으로 document.querySelector() 형식으로 사용되지만 참조객체가 꼭 document여야 하는 것은 아니다.
쿼리 셀렉터의 종류
1. document.querySelector()
- 제공된 CSS 선택자와 일치하는 문서 내의 첫 번째 요소를 반환한다.
- 선택자와 일치하는 요소가 없으면 null을 반환한다.
- 예시
- document.querySelector('#myId'): ID가 "myId"인 요소 선택
- document.querySelector('.myClass'): 클래스가 "myClass"인 요소 선택
- document.querySelector('p'): <p> 태그 요소 선택
2. document.querySelectorAll()
- 제공된 CSS 선택자와 일치하는 문서 내의 모든 요소를 NodeList 형태로 반환한다.
- 선택자와 일치하는 요소가 없으면 빈 NodeList를 반환한다.
- 예시:
- document.querySelectorAll('li'): 모든 <li> 태그 요소 선택
- document.querySelectorAll('.myClass'): 클래스가 "myClass"인 모든 요소 선택
쿼리 셀렉터의 장점
- 유연성: CSS 선택자와 동일한 구문을 사용하므로 다양한 요소를 선택할 수 있습니다.
- 편리성: 복잡한 DOM 구조에서도 원하는 요소를 쉽게 찾을 수 있습니다.
- 가독성: 코드의 가독성을 높여 유지보수를 용이하게 합니다.
쿼리 셀렉터와 함께 사용할 수 있는 CSS 선택자
- ID 선택자 (#): 특정 ID를 가진 요소를 선택한다. 예: #myId
- 클래스 선택자 (.): 특정 클래스를 가진 요소를 선택한다. 예: .myClass
- 태그 선택자: 특정 태그 이름을 가진 요소를 선택한다. 예: p, div, span
- 속성 선택자 ([]): 특정 속성을 가진 요소를 선택한다. 예: [type="text"], [data-id="123"]
- 가상 클래스 선택자 (:): 특정 상태나 조건을 가진 요소를 선택한다. . 예: :hover, :first-child, :nth-child(2)
- 가상 요소 선택자 (::): 요소의 특정 부분을 선택한다. 예: ::before, ::after
- 자손 선택자 (공백): 특정 요소의 자손 요소를 선택한다. 예: div p, ul li
- 자식 선택자 (>): 특정 요소의 바로 아래 자식 요소를 선택한다. 예: div > p, ul > li
- 인접 형제 선택자 (+): 특정 요소 바로 뒤에 오는 형제 요소를 선택한다. 예: h1 + p
- 일반 형제 선택자 (~): 특정 요소 뒤에 오는 모든 형제 요소를 선택한다. 예: h1 ~ p
- 복합 선택자 (,): 여러개의 선택자를 동시에 선택다. 예: #myId, .myClass, p
// ID와 태그를 함께 사용하여 요소 선택
const element1 = document.querySelector('#myId p');
// ID가 "myId"인 요소 내부의 <p> 태그 선택
// 클래스와 속성을 함께 사용하여 요소 선택
const element2 = document.querySelectorAll('.myClass[data-id="123"]');
// 클래스가 "myClass"이고 data-id 속성이 "123"인 모든 요소 선택
// 복합 선택자를 사용하여 여러 요소 선택
const elements = document.querySelectorAll('#myId, .myClass, p');
// ID가 "myId"인 요소, 클래스가 "myClass"인 요소, <p> 태그 요소 모두 선택
여기서 ID 선택자를 사용하면 querySelector나 querySelectorAll이나 동일한 요소를 가리킨다.