[CSS] 자주 사용되는 dom selector

querySelectorAll

element의 자식 요소 중 주어진 CSS 선택자에 대응하는 모든 요소 반환. 

 

querySelector(css)

주어진 css선택자에 대응하는 요소 중 첫번째 요소 반환 후 검색 종료. 

 

closest

element.closest(css) 

요소 자신을 포함하여 css 선택자와 일치하는 가장 가까운 조상 요소 검색. 

해당 요소부터 시작해 DOM트리를 한 단계씩 거슬러 올라가면서 원하는 요소 반환. 

 

<div class="contents">
  <ul class="book">
    <li class="chapter">1장</li>
    <li class="chapter">2장</li>
  </ul>
</div>

<script>
  let chapter = document.querySelector('.chapter'); // LI

  alert(chapter.closest('.book')); // UL
  alert(chapter.closest('.contents')); // DIV

  alert(chapter.closest('h1')); // null(h1은 li의 조상 요소가 아님)
</script>