javascript - 测试选择器是否匹配给定元素

Question

有什么方法可以测试选择器是否匹配给定的 DOM 元素？最好不使用像 Sizzle 这样的外部库。这是一个库，我想尽量减少“核心”库所需的第三方插件的数量。如果它最终需要 Sizzle，我会将其作为插件添加到库中，供那些需要它启用的功能的人使用。

例如，我可以这样做:

var element = <input name="el" />

matches("input[name=el]", element) == true

编辑:经过深思熟虑，我想出了一个解决方案，这在技术上可行，但在效率方面似乎并不是最佳选择:

function matchesSelector(selector, element) { 
    var nodeList = document.querySelectorAll(selector); 
    for ( var e in nodeList ) {
        return nodeList[e] === element; 
    }
    return false; 
}

基本上，该函数使用给定的选择器查询整个文档，然后遍历 nodeList。如果给定元素在 nodeList 中，则返回 true，否则返回 false。

如果有人能提出更有效的答案，我很乐意将他们的回复标记为答案。

编辑:Flavius Stef指出我针对 Firefox 3.6+ 的浏览器特定解决方案，mozMatchesSelector .我还找到了 Chrome 的等效项(版本兼容性未知，它可能在 Safari 或其他 webkit 浏览器上工作也可能不工作):webkitMatchesSelector，它与 Firefox 实现基本相同。我还没有找到 IE 浏览器的任何本地实现。

对于上面的例子，用法是:

element.(moz|webkit)MatchesSelector("input[name=el]")

W3C 似乎也在 Selectors API Level 2(此时仍是草案)规范中解决了这个问题。 matchesSelector 一旦获得批准，将成为 DOM 元素上的一个方法。

W3C 用法:element.matchesSelector(selector)

由于该规范仍处于草案阶段，并且在流行的浏览器成为标准后实现这些方法还有一段时间，因此可能需要一段时间才能实际使用。好消息是，如果您使用任何流行的框架，它们很可能会为您实现此功能，而不必担心跨浏览器兼容性。尽管这对我们这些不能包含第三方库的人没有帮助。

实现此功能的框架或库:

http://www.prototypejs.org/api/element/match

http://developer.yahoo.com/yui/docs/YAHOO.util.Selector.html

http://docs.jquery.com/Traversing/is

http://extjs.com/deploy/dev/docs/output/Ext.DomQuery.html#Ext.DomQuery-methods

http://base2.googlecode.com/svn/doc/base2.html#/doc/!base2.DOM.Element.matchesSelector

http://wiki.github.com/jeresig/sizzle/

Answer 1

为了那些多年后访问此页面的人的利益，此功能现在在所有现代浏览器中实现为不带 vendor 前缀的 element.matches(ms 除外) > 适用于 Edge 15 以外的 MS 浏览器，以及适用于 Android/KitKat 的 webkit)。参见 http://caniuse.com/matchesselector .