是否可以在元素数组上使用querySelectorAll？

Question

假设我有一个基于any的DOM元素数组 selector

var elems = document.querySelectorAll(selector);

我不知道包含了什么elems,但让我们假设elems.length > 0

我想使用querySelectorAll(或一些等效函数)elems来查找与其他选择器匹配的所有元素.

// example: find all buttons with class `foo` within `elems` array
var buttons = elems.querySelectorAll("button.foo");

这不起作用(显而易见的原因),但我不确定如何做到这一点:(

---

这是我创建的包装器,用于处理@Tibos接受的答案

// Element.matches wrapper
(function(e){
  if (typeof e.matches !== "function") {
    e.matches = e.webkitMatchesSelector ||
                e.mozMatchesSelector    ||
                e.msMatchesSelector     ||
                e.oMatchesSelector      ||
                e.matchesSelector;
  }
})(Element.prototype);

Answer 1

您可以使用该Element#matches方法筛选出原始列表:

var elems = document.querySelectorAll(selector);
var buttons = Array.prototype.filter.call(elems, function(elem){ 
  return elem.matches('button');
});

请注意,您可以在其中找到此方法的各种名称,您可能希望围绕它们包装函数.(请查看文档!)

另一种可能性是获得document.querySelectorAll两个选择器返回的两组元素的交集.有两组交集的各种实现,随意使用一个符合您的喜好.这个问题提供了一些想法.