Element.closest()

closest()Element インターフェイスのメソッドは、引数で指定されたセレクターに一致する現在の要素の直近の祖先 (または現在の要素自身) を返します。そのような要素が存在しない場合は null を返します。

構文

var closestElement = element.closest(selectors);

引数

  • selectorsDOMString で、以下のようなセレクターのリストが入ります。
    "p:hover, .toto + q"
  • element は処理する要素ツリーの最上位にある Element です。

返値

  • closestElement は選択された要素の直近の祖先に当たる Element です。 null になることがあります。

例外

  • selectors が妥当なセレクターリストの文字列ではない場合、 SyntaxError が投げられます。

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 である直近の祖先、ここでは div-03 自身を返す

var r3 = el.closest("article > div");  
// 親に article を持つ div である直近の祖先、ここでは div-01 を返す

var r4 = el.closest(":not(div)");
// div ではない直近の祖先、ここではもっとも外側の article を返す

ポリフィル

Element.closest() に対応していないブラウザーで、 element.matches() (または接頭辞付きの同等のもの、すなわち IE9+) に対応しているものには、ポリフィルがあります。

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;
  };
}

仕様書

仕様書 状態 備考
DOM
Element.closest() の定義
現行の標準 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
closestChrome 完全対応 41Edge 完全対応 15Firefox 完全対応 35IE 未対応 なしOpera 完全対応 28Safari 完全対応 6WebView Android 完全対応 41Chrome Android 完全対応 41Firefox Android 完全対応 35Opera Android 完全対応 ありSafari iOS 完全対応 9Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応

互換性のメモ

  • Edge では、要素が DOM に先に添付されていないと document.createElement(element).closest(element)null を返します

関連情報