Programming Learning Diary

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에 비해 코드의 길이가 짧다는 장점도 있습니다.

댓글목록

등록된 댓글이 없습니다.