Element.closest()

Syntax

var closestElement = targetElement.closest(selectors);

Parameters

• selectors CSS 선택자가 들어가는 DOMString 개체 문자열, 예)
  "p:hover, .toto + q".

Result value

• closestElement 기준 요소를 포함하여 부모 요소 단위로 선택자 조건에 가장 가까운 Element 객체를 가져오며, null 값이 될 수 있다.

Exceptions

• SyntaxError : CSS 선택자 (selectors)가 올바른 선택자 식이 아닐 경우.

Example

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>

JavaScript

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

var r1 = el.closest("#div-02");  
// id=div-02 조건이 만족하므로 속성을 가진 부모 요소가 반환된다.

var r2 = el.closest("div div");  
// div 요소에 만족한 요소 중 div 자식을 가리키므로, id=div-03 자신이 만족된다.

var r3 = el.closest("article > div");  
// 가장 가까운 article 요소 바로 하위의 div 요소 id=div-01 속성을 가진 요소가 반환된다.

var r4 = el.closest(":not(div)");
// div 요소가 아닌 가장 가까운 부모 article 요소가 반환된다.

Polyfill

아래 폴리필은 Element.closest(), 메소드를 지원하지 않는 브라우저를 위한 방법이지만, element.matches() 메소드를 사용하므로 IE 9 이상에서 동작한다.

if (!Element.prototype.matches) {
  Element.prototype.matches = Element.prototype.msMatchesSelector || 
                              Element.prototype.webkitMatchesSelector;
}

if (!Element.prototype.closest) {
  Element.prototype.closest = function(s) {
    var el = this;

    do {
      if (el.matches(s)) return el;
      el = el.parentElement || el.parentNode;
    } while (el !== null && el.nodeType === 1);
    return null;
  };
}

만약 정말 IE 8 지원을 고려해야 한다면, 아래 폴리필을 사용할 수 있다. 그러나 해당 폴리필은 성능이 매우 느리며, IE 8 특성 상 CSS 2.1 사양의 선택자까지밖에 사용할 수 없다. 또한 실제 운영 시 약간의 지연이 발생할 수 있다.

if (window.Element && !Element.prototype.closest) {
  Element.prototype.closest =
  function(s) {
    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
        i,
        el = this;
    do {
      i = matches.length;
      while (--i >= 0 && matches.item(i) !== el) {};
    } while ((i < 0) && (el = el.parentElement));
    return el;
  };
}

규격

브라우저 호환성

같이보기

• Element 인터페이스.
• 선택자 구문
• 선택자 구문을 사용하는 다른 메소드: element.querySelector() 및 element.matches().