closet 메서드

기본 개념

• closet() 메서드는 DOM API의 일부로, CSS 선택자와 일치하는 가장 가까운 조상 요소를 찾는 데 사용됨

기능

• 현재 요소부터 시작해서 DOM 트리를 위로 탐색함
• 주어진 선택자와 일치하는 가장 가까운 조상 요소를 반환함
• 현재 요소 자체가 선택자와 일치하면 그 요소를 반환함

탐색 방향

• 현재 요소에서 시작해서 부모 요소, 조부모 요소 등 위로 이동함
• 문서의 root 까지 탐색함 (보통 html 태그)

반환 값

• 일치하는 요소를 찾으면 그 요소를 반환함
• 일치하는 요소가 없으면 null을 반환함

사용 예시

const btn = event.target.closest('.btn')

• 이벤트가 발생한 요소로부터 시작해서 .btn 클래스를 가진 가장 가까운 조상 요소를 찾음
• 이벤트 위임 패턴에서 유용함
• 예를 들어, 버튼 내부의 아이콘을 클릭했을 때도 버튼 요소를 찾을 수 있음

장점

• 이벤트 버블링과 결합하여 효율적인 이벤트 처리 가능
• 동적으로 추가된 요소에 대해서도 작동함
• 복잡한 DOM 구조에서 특정 조상 요소를 쉽게 찾을 수 있음
  (DOM 구조가 변경되어도 유연하게 대응 가능)

---

용어 및 개념 정리

이벤트 버블링

• DOM 트리에서 특정 요소에서 발생한 이벤트가 그 요소의 조상들로 순차적으로 전파되는 현상

<div id="outer">
  <div id="inner">
    <button id="button">클릭</button>
  </div>
</div>

• 위 구조에서 버튼을 클릭하면 이벤트는
  button -> inner div -> outer div -> body -> html -> document 순으로 전파가 됨