Element.closest()

 

closest() 는 특정한 문자열과 일치하는 노드에서 가장 가까운 자신 또는 조상엘리먼트를 반환한다.

값이 없다면 null 을 반환한다.

 

---

 

문법

 

var closestElement = targetElement.closest(selectors);

 

selectors 에는 id, class, div 등을 넣으면 된다.

---

 

예시

 

<article>
  <div id="div-01">여기는 div-01
    <div id="div-02">여기는 div-02
      <div id="div-03">여기는 div-03
      </div>
    </div>
  </div>
</article>

 

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

var r1 = el.closest("#div-02");
// id=div-02로 요소를 반환.

var r2 = el.closest("div div");
// div에 있는 div인 가장 가까운 상위 항목을 반환. div-03 자체

var r3 = el.closest("article > div");
// 상위 아티클이 있는 div인 가장 가까운 상위 항목을 반환.  div-01

var r4 = el.closest(":not(div)");
// div가 아닌 가장 가까운 상위 항목을 반환. 가장 바깥쪽 아티클

 

ㅇㅇ...