找出querySelector的哪个部分与给定元素匹配

Question

是否有可能找出querySelector的哪个部分与DOM中的特定元素匹配？

假设您有以下查询：

'H1，H2，H3，h4.custom-BG，DIV'

如果你使用document.querySelectorAll，我如何回溯我负责在DOM中查找元素的查询片段？

Answer 1

您可以使用Element.matches，其截至目前为reasonable support。

  

如果元素是，Element.matches()方法返回true   由指定的选择器字符串选择;否则，返回false。

你会使用这样的东西

var str = 'h1,h2,h3,h4.custom-bg,div';
[].forEach.call(document.querySelectorAll(str), function(elm){
   var slctrMatched = str.split(",").filter(elm.matches);
   console.log(slctrMatched.join(" "));
});

我们正在使用Array.forEach，但更重要的是Array.filter，它是传递Element.matches方法，因此它会过滤掉选择器，返回一个数组，我们输出到控制台加入Array.join