Element.closest()

在此页

句法
范例
Polyfill
规范
浏览器兼容性
另请参阅
相关话题


							
								closest()

method traverses the


								元素

and its parents (heading toward the document root) until it finds a node that matches the provided selector string. Will return itself or the matching ancestor. If no such element exists, it returns


							null

句法

var closestElement = targetElement.closest(selectors);

参数

selectors 是 DOMString containing a selector list.
ex: p:hover, .toto + q

返回值

closestElement 是 元素 which is the closest ancestor of the selected element. It may be null .

异常

SyntaxError is thrown if the selectors is not a valid selector list string.

范例

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");
// returns the element with the id=div-02
var r2 = el.closest("div div");
// returns the closest ancestor which is a div in div, here it is the div-03 itself
var r3 = el.closest("article > div");
// returns the closest ancestor which is a div and has a parent article, here it is the div-01
var r4 = el.closest(":not(div)");
// returns the closest ancestor which is not a div, here it is the outmost article

Polyfill

For browsers that do not support Element.closest() , but carry support for element.matches() (or a prefixed equivalent, meaning IE9+), a polyfill exists:

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

However, if you really do require IE 8 support, then the following polyfill will do the job very slowly, but eventually. However, it will only support CSS 2.1 selectors in IE 8, and it can cause severe lag spikes in production websites.

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 The definition of 'Element.closest()' in that specification.	实时标准	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`closest`	Chrome 41	Edge 15	Firefox 35	IE 不支持 No	Opera 28	Safari 6	WebView Android 41	Chrome Android 41	Firefox Android 35	Opera Android 28	Safari iOS 9	Samsung Internet Android 4.0

图例

完整支持
不支持

Compatibility notes

In Edge 15-18 document.createElement(tagName).closest(tagName) 将返回 null if the element is not first connected (directly or indirectly) to the context object, for example the Document object in the case of the normal DOM.

另请参阅

元素 接口。
The syntax of Selectors
Other methods that take selectors: element.querySelector() and element.matches() .

元数据

最后修改： Aug 1, 2020

在此页

句法

参数

返回值

异常

范例