MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Element.closest()

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀.由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变.

Element.closest() 方法用来获取:匹配特定选择器且离当前元素最近的祖先元素(也可以是当前元素本身)。如果匹配不到,则返回 null

语法

var elt = element.closest(selectors); 

参数

  • selectors 是指定的选择器,比如 "p:hover, .toto + q"。
  • element 表示当前元素。

返回值

  • elt 是查询到的祖先元素,也可能是 null。

异常

  • 如果传入的选择器不合法,则抛出 SyntaxError 异常。

示例

<p>
  <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>
</p>
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("p > div");  
// 返回最近的拥有父元素 p 的 div 祖先元素,这里的话就是 div-01

var r4 = el.closest(":not(div)"); 
// 返回最近的非 div 的祖先元素,这里的话就是最外层的 p

规范

Specification Status Comment
DOM
Element.closest()
Living Standard Initial definition.

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 41 35.0 (35.0) 未实现 ? ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? 35.0 (35.0) 未实现 ? ?

相关链接

文档标签和贡献者

 此页面的贡献者: teoli, ziyunfei
 最后编辑者: teoli,