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

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

这并不像听起来那么容易。并且只对相关元素的子元素进行处理。不是元素本身

var p = document.querySelector('p')

注：以上线条仅用于说明。在现实生活中，我实际上通过其他方式找到了元素

p.querySelector('p')

返回

null

。因为querySelector只对后代进行操作

我可以做到：

p.parentNode.querySelector('.someclass')

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

---

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

通常，给定元素

e

，检查它是否匹配您将使用的选择器：

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

注意：

check

表示元素是否与选择器匹配

---

下面是一个演示：

并非在所有浏览器中，但这可能会有所帮助：

示例用法（第页）

这就是元素！
var el=document.getElementById（“foo”）；
如果webkit浏览器中的（el.mozMatchesSelector（“div”）{//或webkitMatchesSelector（“div”）或IE9/10中的msMatchesSelector（“div”）
警报（“匹配！”）；
}

Supose唯一的另一种方法是运行

querySelector

并循环所有项目测试，如果它与您已有的项目相同

您可以使用该方法

支持可在以下网址找到：

---

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

• 元素。msMatchesSelector（选择器）

  （IE）

• element.mozMatchesSelector（选择器）

  （mozilla）

• 元素。webkit匹配选择器（选择器）

  （webkit）

• 元素。oMatchesSelector（选择器）

  （Opera）

---

另外：在主要浏览器中使用

匹配选择器的助手

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）
在这里会更短；）
 
querySelector
对子代而不是子代进行操作。@Asad：子代和子代通常可以互换使用，与父代和先行项的使用方式大致相同。如果你真的喜欢，我可以更改术语。我不确定这是否有用：为什么你不能只查询给定元素的
className
或
Attributes
，属性等。但是生成的代码看起来像是已经以querySelector的形式存在的某个东西的副本。好吧，替代方法看起来更昂贵：以某种方式，您必须循环一组节点，并将它们与给定节点进行比较，以确保您在正确的节点上操作。在节点已经可用的情况下，查询其属性/属性似乎更为明显。人们可以用螺丝刀把钉子钉进木头里，但锤子更合适。任何人想要对照选择器检查一个元件的原因是，他们通过其他方式找到了该元件。在我的例子中，我正在构建一个函数，以查找哪个元素的父元素（如果有的话）与特定选择器匹配。@Naller我在答案中添加了一个演示。这看起来正是我想要的。MDN文档位于。是否与您竞争以查找MDC文档对不起，我不确定我是否理解正确。您需要MDN文档页面吗？我在一个页面上提供了一个链接toMDN，嗯。我自己找到了链接。编辑：啊，这么多伟大的答案！
<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>

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');