Language/JavaScript
[JavaScript] element.closest() - 특정 엘리먼트를 기준으로 부모요소, 상위요소 중 일치하는 요소 찾기
썸머워즈
2022. 3. 2. 19:34
반응형
특정 element를 기준으로 상위요소 중 일치하는 요소를 찾게 도와주는 closest() 메서드에 대해 알아보자.
closest() 메서드는 기준 element에서부터 부모 요소 단위로 출발하여 각 요소가 지정한 선택자에 만족할 때까지 탐색한다.
그 중 가장 가깝게 조건에 만족하는 부모 요소가 반환되며, 조건에 만족한 요소가 없으면 null값을 반환한다.
▷ 구문
let closestElement = targetElement.closest(selectors);
selectors : 하나 이상의 선택자를 포함한 DOM 요소 문자열이다.
▷ 예제 1) closest 사용법
<!doctype html>
<html lang="ko">
<head>
<script src="./test.js"></script>
<title>mineItRecord</title>
</head>
<body>
<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>
<span>span?span!</span>
</article>
</body>
</html>let el = document.getElementById('div-03');
el.closest("#div-02");
// id=div-02 조건이 만족하므로 속성을 가진 부모 요소가 반환된다.
el.closest("div div");
// div 요소에 만족한 요소 중 div 자식을 가리키므로, id=div-03 자신이 만족된다.
el.closest("article > div");
// 가장 가까운 article 요소 바로 하위의 div 요소 id=div-01 속성을 가진 요소가 반환된다.
el.closest(":not(div)");
// div 요소가 아닌 가장 가까운 부모 article 요소가 반환된다.
el.closest("span");
// div-03 의 부모요소에 들어있지 않기 때문에 null을 반환한다.
el.closest("article").querySelector('span');
// article를 기준으로 span을 찾아 span 요소가 반환된다.
예제를 통해 본 사용법은 아주 쉽다.
하지만 IE에서 작동을 안하니 염두해 사용해주어야한다. (되는게 없다 IE는)
참고 : https://developer.mozilla.org/ko/docs/Web/API/Element/closest
Element.closest() - Web API | MDN
아래 폴리필은 Element.closest(), 메소드를 지원하지 않는 브라우저를 위한 방법이지만, element.matches() 메소드를 사용하므로 IE 9 이상에서 동작한다.
developer.mozilla.org
반응형