此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
Element.closest()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2017年4月.
Element.closest() 方法用来获取：匹配特定选择器且离当前元素最近的祖先元素（也可以是当前元素本身）。如果匹配不到，则返回null。
语法
js
closest(selectors)参数
- selectors 是指定的选择器，比如
"p:hover, .toto + q"。
返回值
- elt 是查询到的祖先元素，也可能是
null。
异常
SyntaxErrorDOMException如果选择器不合法，则抛出该异常。
示例
HTML
html
<article> <div> Here is div-01 <div> Here is div-02 <div>Here is div-03</div> </div> </div></article>JavaScript
js
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-01var r4 = el.closest(":not(div)");// 返回最近的非 div 的祖先元素，这里的话就是最外层的 article兼容
部分浏览器并不支持Element.closest()，但却支持了element.matches()（或拥有私有前缀，如 IE9+），一个 polyfill 案例：
js
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; if (!document.documentElement.contains(el)) return null; do { if (el.matches(s)) return el; el = el.parentElement; } while (el !== null); return null; };然而，如果你需要兼容到 IE8，那么随后这个 polyfill 将会非常缓慢地运行到结束。并且，IE8 只支持 CSS2.1 的选择器，并且使网页运行非常缓慢。
js
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; };}规范
| Specification |
|---|
| DOM # ref-for-dom-element-closest① |
浏览器兼容性
兼容性说明
- 当在 Edge 15-18 里使用
document.createElement(tagName).closest(tagName)，如果元素不是第一个（直接地或间接地）连接到上下文对象的话将会返回null，例如在一般情况下 DOM 中的Document对象。
参见
Element接口。- 选择器语法
- 其他相关选择器方法：
element.querySelector()和element.matches()。