Javascript 如何筛选QuerySelectorAll返回的元素

我正在开发一个javascript库，我使用此函数匹配元素：

$ = function (a)
{
    var x;
    if (typeof a !== "string" || typeof a === "undefined"){ return a;}

    //Pick the quickest method for each kind of selector
    if(a.match(/^#([\w\-]+$)/))
    {
        return document.getElementById(a.split('#')[1]);
    }
    else if(a.match(/^([\w\-]+)$/))
    {
        x = document.getElementsByTagName(a);
    }
    else
    {
        x = document.querySelectorAll(a);
    }

    //Return the single object if applicable
    return (x.length === 1) ? x[0] : x;
};

在某些情况下，我希望过滤此函数的结果，例如选择

div span

，或

id div

或其他相当简单的选择器

如何筛选这些结果？我可以创建一个文档片段，并对该片段使用querySelectorAll方法，还是必须求助于手动字符串操作

我只关心现代浏览器和IE8+

如果您想查看我的图书馆的其他部分，请访问：

编辑：

为了澄清这一点，我希望能够执行类似$u（选择器）.children（其他选择器）的操作，并返回与该选择器匹配的children元素

编辑：

下面是我对最简单选择器的潜在解决方案：

tag_reg = /^([\w\-]+)$/;
id_reg = /#([\w\-]+$)/;
class_reg = /\.([\w\-]+)$/;

function _sel_filter(filter, curr_sel)
{
    var i,
        len = curr_sel.length,
        matches = [];

    if(typeof filter !== "string")
    {
        return filter;
    }

    //Filter by tag
    if(filter.match(tag_reg))
    {
        for(i=0;i<len;i++)
        {
            if(curr_sell[i].tagName.toLowerCase() == filter.toLowerCase())
            {
                matches.push(curr_sel[i]);
            }
        }
    }
    else if(filter.match(class_reg))
    {
        for(i=0;i<len;i++)
        {
            if(curr_sel[i].classList.contains(filter))
            {
                matches.push(curr_sel[i]);
            }
        }
    }
    else if(filter.match(id_reg))
    {
        return document.getElementById(filter);
    }
    else
    {
        console.log(filter+" is not a valid filter");
    }

    return (matches.length === 1) ? matches[0] : matches;

}

tag_reg=/^（[\w\-]+）$/；
id_reg=/#（[\w\-]+$）/；
类注册=/\（[\w\-]+）$/；
功能选择滤波器（滤波器，电流选择）
{
var i，
len=当前选择长度，
匹配项=[]；
如果（过滤器类型！=“字符串”）
{
回流过滤器；
}
//按标签筛选
if（过滤器匹配（标记注册））
{
对于（i=0；i我想我没有答对这个问题。为什么要“过滤”
querySelectorAll（）
的结果，事实上，它本身就是一种过滤器。如果查询
divspan
或更好的
#id div
，这些结果已经过滤了，不是吗

但是，您可以将
Array.prototype.filter
应用于
querySelectorAll
的静态结果，如下所示：

var filter   = Array.prototype.filter,
    result   = document.querySelectorAll('div'),
    filtered = filter.call( result, function( node ) {
        return !!node.querySelectorAll('span').length;
    });

该代码将首先使用
queryselectoral（）
查询文档中的所有
节点。之后，它将筛选至少包含一个
的
节点。该代码没有多大意义，仅用于说明目的（以防某些SO成员想要创建donk注释）

更新

您还可以使用
元素进行筛选。ComparedDocumentPosition
。我还将判断元素是否是
断开连接的
，
后面的
，
前面的
，或者
包含的
。请参阅一些支持
qsa
的浏览器也支持非标准的
匹配选择器
方法，例如：

element.webkitMatchesSelector('.someSelector')

…这将返回一个布尔值，表示
元素
是否与提供的选择器匹配。因此，您可以迭代集合，并应用该方法，保留肯定的结果

在没有
匹配选择器的浏览器中，您可能需要构建自己的基于选择器的方法，类似于正在构建的选择器引擎

注意：NodeList不是真正的数组，也就是说它没有
数组方法（如slice、some、map等）将其转换为
数组，请尝试array.from（节点列表）

参考：

例如：

let highlightedItems = Array.from(userList.querySelectorAll(".highlighted"));

highlightedItems.filter((item) => {
 //...
})

2019年最简洁的方法是使用
..
加上数组文字
[…]
，这对可编辑对象（如
querySelectorAll
返回的节点列表）非常有效：

[…document.queryselectoral（“.myClass”）].filter（el=>{/*此处的代码*/}）
有时我需要获取当前元素的父元素或子元素。元素列表/节点列表是否总是从数组原型继承？嗯……这很有帮助，但我仍然需要与节点进行比较。嗯，可能的用法是使用多个不同的选择器（因为DOM不同），但您仍然希望从始终存在的特定元素中清除这些元素。当然，这看起来像是，架构中首先出现了一些错误，但我们都出现了…感谢这个答案让我意识到我应该使用querySelector进行过滤，而不是过滤两次选择。好吧，我会预先fer避免使用特定于浏览器的功能。@timw4mail:是的，但您可以测试特定于浏览器的功能是否存在，如果有，可以使用它，如果没有，可以使用您的引擎。如果您试图使用像片段这样的临时容器，则需要从其位置删除该元素，然后将其放在其中。可能不是您想要的。@Raynos:：o）这是非常新的。我在阅读jQuery发布说明时听说了这一点。我想他们说他们为它进行了游说。从“jQuery项目请求浏览器添加新的MatcheSelector方法（编写测试套件，与供应商交谈，并归档bug）到现在整个社区都可以获得优异的性能优势。”除了教育目的，为什么您的库比现有库更好？@Raynos我正在尝试创建一个简约的、模块化的库，它不必处理IE6/7中JScript的愚蠢之处。我想这是非常独特的。大多数库都处理IE6/7。不过，看起来这是一种漂亮但昂贵的方式（在较旧的浏览器中）。