8

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

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

var p = document.querySelector('p')

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

p.querySelector('p')

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

我可以做：

p.parentNode.querySelector('.someclass')

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

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

4

4 回答 4

10

您可以使用该matches()方法。

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

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

  • element.msMatchesSelector( selector )（IE）
  • element.mozMatchesSelector( selector )(Mozilla)
  • element.webkitMatchesSelector( selector )（网络套件）
  • element.oMatchesSelector( selector )（歌剧）
于 2012-11-15T12:07:43.933 回答
3

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)这里会更短；）

于 2012-11-15T12:48:15.420 回答
1

通常，给定 element 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/

于 2012-11-15T11:54:29.037 回答
1

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

于 2012-11-15T12:01:42.637 回答