JavaScript 实现 querySelector

Question

问题描述

相信大家都用过 Element.querySelector(selector) 或者 document.querySelector(selector) 来查找 DOM 元素，那么如何实现一个这样的一个函数，这个函数接受两个参数，分别为 selector 和 element（默认为 body），找到 element 所有子元素中满足 selector 的第一个元素。

// 实现querySelector
function querySelector(selector, element) {}

参考实现

这是一个考察递归的题目， 但是需要考虑的内容又、有很多。 比如 selector 支持什么？ 你可能知道又 id，class，元素，以及一些级联选择器，如果想要完整实现还是需要一定的代码量和心思缜密程度的。这一点一定要在开始做之前想到。

为了简单起见，我这里只实现了 class 选择器，剩下的交给读者来完善。 JS代码：

function matchSelector(selector, element) {
  if (Array.prototype.includes.call(element.classList, selector.slice(1))) return true;
  return false;
}
function querySelector(selector, element) {
  if (element === null) return null;
  const children = element.children;
  let res = null;
  for(let child of children) {
    if (matchSelector(selector, child)) return child;
    res = querySelector(selector, child);
    if (res !== null) return res;
  }
  return null;
}

querySelector('.test', document.body);

扩展

• 实现其他选择器类型， 比如 ID，元素，以及兄弟选择器等
• 实现 querySelectorAll