Javascript 可以在元素数组上使用querySelectorAll吗？

假设我有一个基于任意选择器的DOM元素数组

var elems = document.querySelectorAll(selector);

我不知道

elems

中包含了什么，但是让我们假设

elems.length>0

我想在

elems

上使用querySelectorAll（或一些等效函数）来查找与附加选择器匹配的所有元素

// 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);

您可以使用该方法筛选出原始列表：

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

请注意，您可以在各种名称下找到此方法，您可能希望在它们周围包装一个函数。（请查看文档！）

---

另一种可能是获取

文档返回的两组元素的交集。使用两个选择器querySelectorAll

。两组元素的交集有多种实现，您可以随意使用一种。提供了一些想法。

这里是您正在寻找的，如果我可以为您

c更正

---

只要

匹配

不是更标准的，我就这样做

function getElementsFromParents(parentSelector, childSelector) {
    var elems = document.body.querySelectorAll(parentSelector);
    return Array.prototype.reduce.call(elems, function matcher(arr, el) {
        var matches = el.querySelectorAll(childSelector);
        if (matches.length) Array.prototype.forEach.call(matches, function pusher(item) {
            arr.push(item);
        });
        return arr;
    }, []);
}

---

querySelectorAll

返回一个节点列表结构，因此我们更改为数组列表，并可以使用函数映射

  var lines = Array.prototype.slice.call(document.querySelectorAll(selector));
  var paths = lines.map(function(elem){ 
    return elem.querySelector('button');
  });

---

您是否会问类似的问题：这并不是他想要的。这会找到与查询匹配的子元素，他希望数组中的元素与查询匹配。非常感谢。我在原始问题中添加了包装器。如果您觉得合适，请告诉我^^