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，我的主要疑问是如何严格querySelectorAll，document.getElementById，document.getElementsByClassName＆＃39;来实施document.getElementsByTagName我以为我可以联合{x:expression(document.__qsaels.push(this))}感谢@RobG指向What does {x:expression(...)} do?的指针。

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

  

Polyfill故意省略属性选择器

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

@SravanS我感谢你的评论，但我不敢说，你假设太多了。面试官确实希望在HTML标记方面干掉代码。

@SravanS @jfriend00我知道sizzle，我认为在StackOverflow中我可以很容易地理解答案，而不是阅读2242行代码。 ：）

@RobG回应了我的担忧。

在完成所有评论之后，我想知道这个问题是否应该是30分钟电话采访过程的一部分，当你必须在Google Doc中进行现场编码时也是如此。

Answer 1

我在哪里失败了？
我不知道正则表达式来解析选择器

我相信2017年Google的采访中，采访者特别告诉我“我们不是在寻找正则表达式专家，所以不要在那儿花时间”

就我而言，他们希望我将问题分解为更简单的问题，所以我做到了。我编写了单独的辅助函数来完成多项任务。实际上，单元功能确实是可操作的代码中的一部分，可以递归地在所有帮助程序中重用。面试官很喜欢这个，我清除了这一回合。

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

必须找到左侧的选择器。所以我先从左开始。我隐约记得使用t