[JS] 위쪽으로 트리를 순회하는 Element.closest()에 대해 알아보자

728x90

반응형

JS, HTML, CSS만 사용해서 코딩하는 연습을 하다가 처음 보는 것이 있어서 정리하게 되었다.

언젠가 알아두면 써 먹을 일이 분명히 있을 거 같다!

 

Element.closest()

---

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

 

 

구문

---

closet(selectors)

• 매개변수: 'CSS 선택자'
• 반환 값: 자기 자신 또는 가장 가까운 조상 엘리먼트, 일치하는 요소가 없으면 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>

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

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

 

 

참고 자료

---

• https://developer.mozilla.org/ko/docs/Web/API/Element/closest