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

Test if a selector matches a given element(测试选择器是否匹配给定元素)

问题描述

有什么方法可以测试选择器是否匹配给定的 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.

例如，我可以这样做:

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.

编辑: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 Elements 上的一个方法.

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 用法:element.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/

推荐答案

为了那些多年后访问这个页面的人的利益，这个功能现在在所有现代浏览器中实现为 element.matches 不带供应商前缀(Edge 15 以外的 MS 浏览器的 ms 和 Android/KitKat 的 webkit 除外).请参阅 http://caniuse.com/matchesselector.

For the benefit of those visiting this page after lo these many years, this functionality is now implemented in all modern browsers as element.matches without vendor prefix (except for ms for MS browsers other than Edge 15, and webkit for Android/KitKat). See http://caniuse.com/matchesselector.

这篇关于测试选择器是否匹配给定元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！