javascript - 根据 querySelector 检查元素？ (使用 native 方法，而不是 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 找到支持

---

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

• element.msMatchesSelector( 选择器 ) (IE)
• element.mozMatchesSelector( 选择器 ) (mozilla)
• element.webkitMatchesSelector( 选择器 ) (webkit)
• element.oMatchesSelector(选择器)(歌剧)