写写原生JavaScript系列(3)-判断当前元素匹配的CSS选择器

为了检查匹配的元素是否符合某个css选择器,现代浏览器提供了一个matches()、matchesSelector()方法,因此我们来写一个通用的方法,检查元素是否匹配某个css选择器。

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

因为现代浏览器提供了一些DOM4级别的内置方法,因此为了让其他浏览器支持,我们写出了通用的方法,但是为了速度更快,推荐使用拓展内置对象的方式实现。

给一个使用的栗子:

    var el = document.querySelector('span');
    console.log(el.matches('.foo'));

原文出处

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