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

来源:转载

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

// matches polyfillthis.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/


分享给朋友:
您可能感兴趣的文章:
随机阅读: