获取选择器最接近的元素

返回被选元素的第一个祖先元素,祖先是父、祖父、曾祖父,依此类推


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'));