检查元素与查询选择器?(使用本机方法，而不是 JQuery)

Question

我有一个元素。我想检查它是否满足特定查询，例如（'.someclass'），其样式与查询选择器相同。

这并不像听起来那么容易。Element.querySelectorAll 和 Element.querySelector 仅适用于相关元素的后代。不是元素本身。

var p = document.querySelector('p')

注意：以上行仅用于说明目的。在现实生活中，我实际上通过其他方式找到了这个元素。

p.querySelector('p')

返回null .因为查询选择器只对后代进行操作。

我可以做：

p.parentNode.querySelector('.someclass')

但这将返回元素父级的第一个子元素，该子元素可能是不同的元素。例如，如果"p"是父级的第二个子项，则此代码将失败。

如何检查元素本身是否满足查询？

Answer 1

您可以使用

matches()方法。

可以在 http://caniuse.com/matchesselector 找到支持

。<小时 />

但由于它仍然是草稿，所有浏览器都使用前缀实现它（它是 2012 年的草稿）

• element.msMatchesSelector( selector ) （IE）
• element.mozMatchesSelector( selector )（莫兹拉）
• element.webkitMatchesSelector( selector )（网络套件）
• element.oMatchesSelector( selector )（歌剧）

Answer 2

另外：在主要浏览器中使用该MatchesSelector的帮助程序

function matches() {
  var el = document.querySelector('body');
  return ( el.mozMatchesSelector || el.msMatchesSelector ||
           el.oMatchesSelector   || el.webkitMatchesSelector || 
           {name:'getAttribute'} ).name;
}
//=> usage
var someP = document.querySelector('p');
   ,rightClass = someP[matches()]('.someclass');

不过，这里的/someclass/.test(someP.className)会更短;)

Answer 3

不是在所有浏览器中，但这可能会有所帮助： http://caniuse.com/matchesselector

示例用法（来自 MDN 页面）;

<div id="foo">This is the element!</div>
  <script type="text/javascript">
    var el = document.getElementById("foo");
    if (el.mozMatchesSelector("div")) {//or webkitMatchesSelector("div") in webkit browser or msMatchesSelector("div") in IE9/10
      alert("Match!");
    }
  </script>

唯一的其他方法是运行querySelector并循环测试所有项目，如果它与您已有的项目相同。

Answer 4

通常，给定元素 e ，要检查它是否与您将使用的选择器匹配：

var check = false;
var c = e.parentNode.querySelectorAll('selector');
for(var i = 0; i < c.length; i++){
    if (c[i]==e){
        check = true;
    }
}

一个更简洁但有点笨拙的解决方案是：

var c = e.parentNode.querySelectorAll('selector');
var check = Array.prototype.indexOf.call(c,e) != -1;

注意：check指示元素是否与选择器匹配。

下面是一个演示：http://jsfiddle.net/2vX3z/