香草JavaScript函数，用于查找给定CSS选择器的DOM元素

Question

我需要编写一个函数，该函数将CSS选择器作为参数并返回与此选择器匹配的DOM元素数组。我必须遵守一些规则。

• 我不能使用任何JS库。
• 我不能使用 querySelector/querySelectorAll。

我有各种测试CSS选择器来测试我的函数。我想我可以通过简单的标签，它们是单个标签名称，类名或ID名。然后我可以做一些if/else语句，并调用document.getElementsByTag/Class/ID等来获取元素。

function answer (selector) {
    if (selector.indexOf(".") >= 0)
        return document.getElementsByClassName(selector)
    else if (selector.indexOf("#") >= 0)
        return document.getElementById(selector)
    else 
        return document.getElementsByTagName(selector)
}

我现在的问题是，如果单个查询中有多个选择器。例如，我不确定如何处理选择器$div.a_class#an_id。我的想法是在每个 .或 #，然后逐个链接搜索每个选择器的文档，但似乎您无法这样做。任何帮助或指导将不胜感激。

Answer 1

一种选择是递归搜索文档的.children，并检查被迭代的元素是否.matches选择器。如果是，请将其推送到数组：

const find = (selector, parent=document, arr=[]) => {
  [...parent.children].forEach((child) => {
    if (child.matches(selector)) {
      arr.push(child);
    }
    find(selector, child, arr);
  });
  return arr;
};
console.log(find('div.a_class#an_id'));

<div>
  <div class="a_class" id="an_id">target!</div>
</div>

Answer 2

function $(selector) {
  var element = [];
  for (let select of document.body.children) {
    if (select.matches(selector)) {
      element.push(select);
    }
  }
  return element;
}