获取选择器最接近的元素
返回被选元素的第一个祖先元素,祖先是父、祖父、曾祖父,依此类推
closest()
类似于jQuery
的$.closest()
,是 DOM4 中引入的一种元素方法,Firefox 和 Chrome 等现代浏览器的都支持。这是用于Internet Explorer 和其他没有本机支持的浏览器的 polyfill:
// matches polyfill
this.Element && function(ElementPrototype) {
ElementPrototype.matches = ElementPrototype.matches ||
ElementPrototype.matchesSelector ||
ElementPrototype.webkitMatchesSelector ||
ElementPrototype.msMatchesSelector ||
function(selector) {
var node = this, nodes = (node.parentNode || node.document).querySelectorAll(selector), i = -1;
while (nodes[++i] && nodes[i] != node);
return !!nodes[i];
}
}(Element.prototype);
// closest polyfill
this.Element && function(ElementPrototype) {
ElementPrototype.closest = ElementPrototype.closest ||
function(selector) {
var el = this;
while (el.matches && !el.matches(selector)) el = el.parentNode;
return el.matches ? el : null;
}
}(Element.prototype);
支持 DOM4 的浏览器使用优化的内部方法,该方法要快得多。 在扩展本机对象时,通常建议这样做。 现在,您可以在任何DOM元素上调用closest()
,和 jQuery 中的类似:
var el = document.querySelector('span');
console.log(el.closest('div'));