测试选择器是否与给定元素匹配 [英] Test if a selector matches a given element

查看：106 发布时间：2017/2/22 20:04:48 javascript css-selectors

本文介绍了测试选择器是否与给定元素匹配的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

有什么方法来测试一个选择器是否会匹配给定的DOM元素？优选地，不使用诸如Sizzle的外部库。这是一个库，我想尽量减少核心库所需的第三方插件的数量。如果它最终需要Sizzle，我只是添加它作为插件到那些谁想要的功能，它将启用的库。

Is there any way to test if a selector would match a given DOM Element? Preferably, without the use of an external library like Sizzle. This is for a library and I would like to minimize the amount of third party plugins required for the "core" library. If it ends up requiring Sizzle I'll just add that as a plugin to the library for those who want the feature it would enable.

例如，我将能够执行以下操作：

For example, I would be able to do something like:

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

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

编辑：在考虑更多之后，我想出了一个解决方案，这在技术上是有效的，但它在效率方面似乎不是最优的：

EDIT: After thinking about it more, I came up with a solution, this technically works, but it doesn't seem optimal in terms of efficiency:

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

基本上，函数使用给定的选择器查询整个文档，通过nodeList。如果给定的元素在nodeList中，那么它返回true，如果不是，它将返回false。

Basically the function queries the entire document with the given selector, and then it iterates over the nodeList. If the given element is in the nodeList, then it returns true, and if it isn't it will return false.

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

If anyone can come up with a more efficient answer I would gladly mark their response as the answer.

EDIT ： Flavius Stef 指向我的Firefox 3.6+浏览器特定解决方案， mozMatchesSelector 。我还发现Chrome的等效（版本兼容性未知，它可能或可能不工作在Safari或其他webkit浏览器）： webkitMatchesSelector ，这基本上与Firefox相同实施。我还没有找到任何本地实现的IE浏览器。

EDIT: Flavius Stef pointed me towards a browser specific solution for Firefox 3.6+, mozMatchesSelector. I also found the equivalent for Chrome (version compatibility unknown, and it may or may not work on Safari or other webkit browsers): webkitMatchesSelector, which is basically the same as the Firefox implementation. I have not found any native implementation for the IE browsers yet.

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

For the above example, the usage would be:

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

似乎W3C也在Selectors API Level 2（目前仍是草稿）规范中解决了这个问题。 matchesSelector 将是DOM元素一旦批准后的方法。

It seems the W3C has also addressed this in the Selectors API Level 2 (still a draft at this moment) specification. matchesSelector will be a method on DOM Elements once approved.

W3C用法：元素。 matchesSelector（selector）

由于该规范仍然是草稿，并且在流行的浏览器实现方法之前，，它可能会有一段时间，直到这个实际可用。好消息是，如果你使用任何流行的框架，他们可能为你实现这个功能，而不必担心跨浏览器兼容性。

Since that specification is still a draft and there is a lag time before popular browsers implement the methods once it becomes the standard, it may be a while until this actually usable. Good news is, if you use any of the popular frameworks, chances are they probably implement this functionality for you without having to worry about cross browser compatibility. Although that doesn't help those of us who can't include third party libraries.

实现此功能的框架或库：

Frameworks or libraries that implement this functionality:

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/