Question

假设我有一个基于任何 selector

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

Answer 1

您可以使用Element#matches方法过滤掉原始列表：

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

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

另一种可能性是使document.querySelectorAll返回的两组元素与两个选择器的交集。有两组交集的各种实现，随意使用一个符合您的喜好。 This question提供了一些想法。

Answer 2

querySelectorAll返回一个NodeList结构，因此我们更改了一个数组列表，我们可以使用函数映射。

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

Answer 3

这就是你要找的如果我能找到你correct !!

SEE WORKING DEMO

Answer 4

只要matches不是更标准，我就会采取这种方式。

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？

4 个答案: