给定 CSS 选择器的 Vanilla JavaScript 函数，用于查找 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 。 我的想法是 split() 每个 . 或 # 然后为每个选择器逐个链式搜索文档，但似乎您不能这样做。 任何帮助或指导将不胜感激。

Answer 1

一种选择是递归搜索文档的.children ，并检查被迭代的元素 element .matches是否与选择器.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;
}