JS 等价于 jQuery .is()答案

【问题标题】：JS equivalent of jQuery .is()JS 等价于 jQuery .is()
【发布时间】：2014-05-14 02:16:29
【问题描述】：

在现代浏览器上是否有相当于 jQuery .is() 的纯 JS？

我知道有querySelector 方法，但我想检查节点本身，而不是查找子节点。

【问题讨论】：

你可以在github或者这里查看jQuery的源代码：jQuery.fn.is
我可以看到，但理解它并撕掉它是另一个问题。毫无疑问，它还包括对我不想要的旧浏览器的支持。
你想要nodeName吗？是node.nodeName？
@PHPglue no 我不想要节点名称。
重复？ stackoverflow.com/q/3304638/218196

标签： javascript jquery equivalent

【解决方案1】：

看起来matchesSelector是我想要的。

https://developer.mozilla.org/en-US/docs/Web/API/Element.matches

Polyfill 在这里：

https://gist.github.com/jonathantneal/3062955

this.Element && function(ElementPrototype) {
    ElementPrototype.matchesSelector = ElementPrototype.matchesSelector || 
    ElementPrototype.mozMatchesSelector ||
    ElementPrototype.msMatchesSelector ||
    ElementPrototype.oMatchesSelector ||
    ElementPrototype.webkitMatchesSelector ||
    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);

【讨论】：

【解决方案2】：

另一种方法：将您正在测试的元素包装在父元素中，然后从中运行querySelector

function is(el, selector) {
  var div = document.createElement('div');
  div.innerHTML = el.outerHTML;
  return div.querySelector(selector);
}

我进行了一项测试，它成功了：

JS

var a = document.querySelector('a');

 if(is(a, '.foo[name=foo]')) {
  console.log('YES');
} else {
  console.log('Nope');
}

HTML

<a href="#" class="foo" name="foo">Meow</a>

我相信这可以做得更漂亮。

【讨论】：

【解决方案3】：

您已经回答了自己的问题，但根据我上面的评论，我查看了 jQuery.fn.is 函数。这不是从源头上截取的，因为他们使用的函数更加通用，因此可以跨多个其他函数使用，但我将其归结为这个函数：

function is(elem, selector){ //elem is an element, selector is an element, an array or elements, or a string selector for `document.querySelectorAll`
    if(selector.nodeType){
        return elem === selector;
    }

    var qa = (typeof(selector) === 'string' ? document.querySelectorAll(selector) : selector),
        length = qa.length,
        returnArr = [];

    while(length--){
        if(qa[length] === elem){
            return true;
        }
    }

    return false;
}

DEMO

【讨论】：

【解决方案4】：

根据youmightnotneedjquery.com，根据您的 IE 兼容性要求，您甚至可以得到更简单的版本：

var is = function(element, selector) {
  return (element.matches || element.matchesSelector || element.msMatchesSelector || 
    element.mozMatchesSelector || element.webkitMatchesSelector || 
    element.oMatchesSelector).call(element, selector);
};

is(element, '.my-class');

对于 ES6，这将是：

const is = (element, selector) =>
  (element.matches || element.matchesSelector || element.msMatchesSelector || 
    element.mozMatchesSelector || element.webkitMatchesSelector || 
    element.oMatchesSelector).call(element, selector);
};

is(element, '.my-class');

【讨论】：

【解决方案5】：

遵循@AdamMerrifield 的概念，通过Element.prototype 链在任何元素上构建方法is 可能很有用：

Element.prototype.is = function(match) {
    ...
};

所有主流浏览器都支持Element，甚至IE 8+。

这是DEMO。

【讨论】：