如何检查JavaScript DOMElement是否匹配选择器查询

嘿，这个需求其实很容易实现——直接用DOM元素内置的matches()方法就搞定了！

核心用法 #

matches()方法会直接返回一个布尔值，告诉你当前元素是否能被传入的CSS选择器匹配到。针对你的场景，代码可以这么写：

var a = document.getElementById("hello");
// 检查元素是否匹配选择器 "div>div.stuff"
var doesMatch = a.matches("div>div.stuff");

// 输出结果：匹配则为true，不匹配则为false
console.log(doesMatch);

关于选择器的说明 #

这里的选择器div>div.stuff要求满足两个条件：

• 目标元素的直接父元素必须是一个<div>
• 目标元素自身必须是带有stuff类名的<div>

只有同时满足这两点，matches()才会返回true。

兼容性小提示 #

虽然现在主流现代浏览器都支持标准的matches()方法，但如果你需要兼容一些老旧浏览器（比如IE11及更早），可以用带前缀的版本做兼容处理，比如封装一个小工具函数：

function matchesElement(el, selector) {
  return (
    el.matches ||
    el.matchesSelector ||
    el.msMatchesSelector ||
    el.mozMatchesSelector ||
    el.webkitMatchesSelector ||
    el.oMatchesSelector
  ).call(el, selector);
}

// 使用方式
var doesMatch = matchesElement(a, "div>div.stuff");

这样不管在什么浏览器里，都能准确判断元素是否匹配目标选择器啦。

内容的提问来源于stack exchange，提问作者Claudio Bonifazi