如何像在 jQuery 中一样过滤 vanilla Javascript 中的元素？

Question

例如，在 jQuery 中，如果我想要所有<div>和<p>元素，我会这样做：

var $x = $("p, div");

然后如果我想要<div>x 中的所有元素，那么我这样做：

var $divs = $x.filter("div");

那么我如何filter在 vanilla JavaScript 中做这个简单的事情呢？

例如，要选择全部<div>和<p>，然后我可以这样做：

var x = document.querySelectorAll("div, p");

但是 vanilla JavaScript 没有像 jQuery 那样的过滤功能，所以我不能这样做：

var divs = x.filter("div"); // ERROR

希望有人能帮我解决这个问题:-)

提前致谢。

更新

一些评论/答案建议使用.tagName == "DIV" 之类的方法来查找 div，但是，我想要一个像 jQuery 一样带有字符串选择器的解决方案。

原因是因为我还想使用属性、类甚至多个选择器进行过滤，您可以在其中放置逗号。并且字符串选择器必须是动态的。

这意味着，我不知道选择器中有什么。它可以是“div[foo='asd'], .bar”或“#hello, [xx='yy'], p”

所以我不能硬编码 .tagName == "DIV"，因为我不知道选择器字符串中的内容。

Answer 1

您可以使用该matches函数来检查 CSS 选择器是否与给定元素匹配。

var x = document.querySelectorAll("div, p");
var divs = [];

// Iterate through the elements that the first query selector matched
//  (is a paragraph or a div tag)
for (var elem of x) {
    // Check if the given element matches the second query selector
    //  (is a div tag)
    if (elem.matches('div')) {
        divs.push(elem);
    }
}

可以使用以下方法更简洁地编写此代码（并且使用更现代的代码）：

let x = document.querySelectorAll("div, p");
let divs = Array.from(x).filter(elem => elem.matches("div"));

Answer 2

querySelectorAll 返回 NodeList 而不是数组。

您需要将其转换为数组

var arr = Array.prototype.slice.call(x);
var divs = arr.filter(el => { return el.tagName == 'DIV' });