针对querySelector检查元素？ （使用本机方法，而不是JQuery）

Question

我有一个元素。我想检查它是否符合特定查询，例如（'.someclass'）与querySelector的样式相同。

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

var p = document.querySelector('p')

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

p.querySelector('p')

返回null。因为querySelector只对后代运行。

我能做到：

p.parentNode.querySelector('.someclass')

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

如何检查元素本身是否符合查询？

Answer 1

您可以使用matches()方法。

可以在http://caniuse.com/matchesselector

找到支持

---

但由于它仍然是草稿，所有浏览器都使用前缀

实现它

• element.msMatchesSelector( selector )（IE）
• element.mozMatchesSelector( selector )（mozilla）
• element.webkitMatchesSelector( selector )（webkit）
• 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

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

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

更简洁，但有点hacky的解决方案是：

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

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

以下是演示：http://jsfiddle.net/2vX3z/

Answer 4

并非适用于所有浏览器，但这可能会有所帮助：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并循环测试所有项目，如果它与您已有的项目相同。