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