javascript - document.querySelectorAll polyfill

Question

我在一次电话采访中被要求编写一个 document.querySelector/document.querySelectorAll polyfill，使用以下内容

• document.getElementById
• document.getElementsByClassName
• document.getElementsByTagName

polyfill 应该能够采用 css 选择器的任意组合，例如 .foo p.bar.baz span.qax。

我想不出合适的解决方案。

---

我的方法...

... 是解析 selector 并从右边开始。

关于.foo p.bar.baz span.qax

• 我想用 ['.foo', ['p', '.bar',
'.baz'], ['span', '.qax']
• 取最右边的元素，
  • 如果它是一个数组，对于数组最右边的元素，使用可用的方法获取节点。
  • 否则对于数组最右边的元素，使用可用的方法获取节点
• 并根据左侧的剩余选择器过滤可用节点

---

我哪里失败了？

• 我想不出解析选择器的正则表达式

---

我想我应该从解析选择器的左侧而不是右侧开始。

---

我搜索了 document.queryselector polyfill但在大多数可用解决方案中无法理解 {x:expression(document.__qsaels.push(this))}。

---

任何指针都会有所帮助。谢谢!

---

更新 w.r.t.评论

感谢大家的建议/意见。

@Sitian Liu，我的主要问题是“如何严格使用 document.getElementById、document.getElementsByClassName、 来实现 querySelectorAll” document.getElementsByTagName' 我想我可以加入 {x:expression(document.__qsaels.push(this))} 感谢@RobG 指向 What does {x:expression(...)} do? 的指针.

@SravanS，对不起，我不知道你对heavy的定义是什么，但是给我的选择器有classes，tags 和 子选择器。

Polyfill intentionally omits attribute selectors

@guest271314 我不记得是否存在属性选择器。我猜是故意省略的

@SravanS 我很欣赏你的评论，但我不敢说，你假设太多了。面试官确实想针对 HTML 标记试运行代码。

@SravanS @jfriend00 我知道 sizzle ，我认为我可以在 StackOverflow 中轻松理解答案，而不是阅读 2242 行代码。 :)

@RobG 表达了我的担忧。

---

看完所有评论后，我想知道这个问题是否应该作为 30 分钟电话面试过程的一部分，当您必须在 Google 文档中对其进行实时编码时也是如此。

Answer 1

Where did I fail?
I could not figure out the regex to parse the selector

我相信 2017 年的谷歌面试，面试官特别告诉我“我们不是在寻找正则表达式专家，所以不要在那里投入时间”

就我而言，他们希望我将问题分解为更简单的问题，我做到了。我编写了单独的辅助函数来完成多项工作。单元函数实际上作为leveregeable代码找到了一部分，可以在所有助手中递归重用。面试官喜欢这个，我通过了那一轮。

我会在一周后在这里更新解决方案。要点，首先您需要按空格和 > 子选择器拆分字符串。对于这种拆分，您也可以编写一个 O(n) for 循环来遍历整个字符串。并且不使用 JS .split(不是因为它与算法相关，而是因为以这种方式拆分将需要进一步的逻辑)例如，只有在找到一个 > 时才创建子数组 .

必须找到左侧的选择器。所以我先从左开始。我依稀记得用过t