javascript - 自定义 querySelectorAll 实现

Question

这是一个面试问题给我的——我没有得到这份工作，但我仍然想弄清楚。

目标是写两个 querySelectorAll功能:一个名为 qsa1它适用于由单个标签名称(例如 div 或 span )和另一个名为 qsa2 组成的选择器。它接受任意嵌套的标签选择器(例如 p span 或 ol li code )。

我很容易得到第一个，但第二个有点棘手。

我怀疑，为了处理可变数量的选择器，正确的解决方案可能是递归的，但我想我应该首先尝试让一些迭代的东西工作。这是我到目前为止所得到的:

  qsa2 = function(node, selector) {
    var selectors = selector.split(" ");
    var matches;
    var children;
    var child; 
    var parents = node.getElementsByTagName(selectors[0]);
    if (parents.length > 0) {
        for (var i = 0; i < parents.length; i++) {
            children = parents[i].getElementsByTagName(selectors[1]);
            if (children.length > 0) {
                for (var i = 0; i < parents.length; i++) {
                    child = children[i];
                    matches.push(child); // somehow store our result here
                }
            }
        }
    }
    return matches;
  }

我的代码的第一个问题，除了它不起作用之外，是它只处理两个选择器(但它应该能够清除第一个、第二个和第四个案例)。

第二个问题是我无法返回正确的结果。我知道，就像 qsa1 中那样，我应该返回与调用 getElementsByTagName() 得到的结果相同的结果函数“返回具有给定标签名称的元素的实时NodeList”。创建数组并推送或附加 Node s到它并没有削减它。

如何编写正确的返回结果？

(对于上下文，可以找到完整的代码 here )

Answer 1

我的做法是这样的

function qsa2(selector) {
    var next = document;
    selector.split(/\s+/g).forEach(function(sel) {
        var arr = [];
        (Array.isArray(next) ? next : [next]).forEach(function(el) {
            arr = arr.concat( [].slice.call(el.getElementsByTagName(sel) ));
        });
        next = arr;
    });
    return next;
}

假设我们始终以文档作为上下文开始，然后将选择器拆分为空格，就像您已经在做的那样，然后迭代标记名。
在每次迭代中，只需覆盖外部 next 变量，然后再次运行循环即可。
我使用数组和 concat 将结果存储在循环中。

这与问题中的代码有些相似，但应该注意的是，您从未创建数组，实际上 matches 变量是 undefined，并且可以不要被强制。