写写原生JavaScript系列(5)-实现选择祖先元素closest()方法

匹配DOM上级元素,实现closest()方法

从包含自己以及自己的祖先元素中选择出符合条件的元素,closest()类似于jQuery的$.closest() 方法,是一个在现代浏览器中内置支持的一个操作元素的方法,比如在火狐中。

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

由于在现代浏览器中内置支持了这些元素,因此我们为了获得更好的性能,我们建议在原生对象上进行拓展,就可以像下面这样直接使用:

var el = document.querySelector('span');
console.log(el.closest('div'));

原文出处

https://plainjs.com/javascript/traversing/match-element-selector-52/