● CSS 선택자 사용하기 - query 메서드
document 객체의 메서드 중에는 매개변수로 CSS 선택자를 전달받아 노드를 선택하는 메서드도 있습니다.
표 12-4 CSS 선택자를 사용하는 메서드
|
메서드 형식 |
설명 |
|
querySelector(<CSS 선택자>) |
매개변수로 넘어오는 CSS 선택자에 해당하는 노드를 1개만 선택합니다. |
|
querySelectorAll(<CSS 선택자>) |
매개변수로 넘어오는 CSS 선택자에 해당하는 노드를 모두 선택합니다. |
querySelector() 메서드는 요소 노드를 1개만 선택할 때 사용하고, querySelectorAll() 메서드는 노드를 2개 이상 선택할 때 사용합니다. 둘 다 매개변수로 CSS 선택자를 전달받으므로 원하는 노드를 선택하기가 쉽습니다.
예제 코드를 살펴봅시다.
12/02/query.html
<body>
<div class="box-1">
<p class="text">text-1</p>
<p class="text">text-2</p>
</div>
<div class="box-2">
<p class="text">text-3</p>
<p class="text">text-4</p>
</div>
</body>