Element.closest()

closest() メソッドは、要素とその親 (文書ルートに向かって) を、指定されたセレクター文字列に一致するノードが見つかるまで探索します。自分自身または一致する祖先を返します。そのような要素が存在しない場合は、 null を返します。

構文

var closestElement = targetElement.closest(selectors);

引数

  • selectorsDOMString で、セレクターのリストを指定します。
    例: p:hover, .toto + q

返値

  • 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 (Element.prototype.matches.call(el, 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 完全対応 28Safari iOS 完全対応 9Samsung Internet Android 完全対応 4.0

凡例

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

互換性のメモ

  • Edge 15-18 では、要素が最初に(直接的または間接的に)コンテキストオブジェクト、例えば通常の DOM の場合は Document オブジェクトに接続されていない場合、 document.createElement(tagName).closest(tagName)null を返します。

関連情報