[JavaScript] Element.closest()에 대해 알아보자

Element.closest()에 대해 알아보자

 

 

[ Element.closest() ]

Element의 closest() 메서드는 주어진 CSS 선택자와 일치하는 요소를 찾을 때까지, 자기 자신을 포함해 위쪽(부모 방향, 문서 루트까지)으로 문서 트리를 순회한다.

 

구문

closest(selectors)

 

매개변수

selectors: Element와 그 조상 요소들에 테스트할, 유효한 CSS 선택자 문자열을 말한다. 

 

반환 값 

selectors에 일치하는 가장 가까운 조상 Element 또는 자기 자신, 일치하는 요소가 없으면 null을 발생 

 

예제 

 

HTML

<article>
  <div id="div-01">Here is div-01
    <div id="div-02">Here is div-02
      <div id="div-03">Here is div-03</div>
    </div>
  </div>
</article>

 

JavaScript 

const el = document.getElementById('div-03');

// ID가 "div-02"인 가장 가까운 조상
console.log(el.closest('#div-02')); // <div id="div-02">

// div 안에 놓인 div인 가장 가까운 조상
console.log(el.closest('div div')); // <div id="div-03">

// div면서 article을 부모로 둔 가장 가까운 조상
console.log(el.closest("article > div")); // <div id="div-01">

// div가 아닌 가장 가까운 조상
console.log(el.closest(":not(div)")); // <article>