[JavaScript] element.closest() - 특정 엘리먼트를 기준으로 부모요소, 상위요소 중 일치하는 요소 찾기

특정 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