querySelectorAll, querySelector
페이지 정보
작성일 20-11-02 18:48본문
querySelectorAll
elem.querySelectorAll(css)
은 다재다능한 요소 검색 메서드입니다. 이 메서드는 elem
의 자식 요소 중 주어진 CSS 선택자에 대응하는 요소 모두를 반환합니다.
아래 예시는 마지막 <li>
요소 모두를 반환합니다.
<ul>
<li>1-1</li>
<li>1-2</li>
</ul>
<ul>
<li>2-1</li>
<li>2-2</li>
</ul>
<script>
let elements = document.querySelectorAll('ul > li:last-child');
for (let elem of elements) {
alert(elem.innerHTML); // "1-2", "2-2"
}
</script>
querySelectorAll
은 CSS 선택자를 활용할 수 있다는 점에서 아주 유용합니다.
가상 클래스도 사용할 수 있습니다.
querySelectorAll에는 :hover
나 :active
같은 CSS 선택자의 가상 클래스(pseudo-class)도 사용할 수 있습니다. document.querySelectorAll(':hover')
을 사용하면 마우스 포인터가 위에 있는(hover 상태인) 요소 모두를 담은 컬렉션이 반환됩니다. 이때 컬렉션은 DOM 트리 최상단에 위치한 <html>
부터 가장 하단의 요소 순으로 채워집니다.
querySelector
elem.querySelector(css)
는 주어진 CSS 선택자에 대응하는 요소 중 첫 번째 요소를 반환합니다.
elem.querySelectorAll(css)[0]
과 동일하죠. elem.querySelectorAll(css)[0]
은 선택자에 해당하는 모든 요소를 검색해 첫 번째 요소만을 반환하고, elem.querySelector
는 해당하는 요소를 찾으면 검색을 멈춘다는 점에서 차이가 있습니다. elem.querySelector
가 더 빠른 이유이죠. querySelector
는 querySelectorAll
에 비해 코드의 길이가 짧다는 장점도 있습니다.
관련링크
댓글목록
등록된 댓글이 없습니다.