JavaScript
[JS] 위쪽으로 트리를 순회하는 Element.closest()에 대해 알아보자
1two13
2023. 2. 20. 16:37
728x90
반응형
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">
참고 자료
728x90
반응형