javascript - Vanilla 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。我的想法是在每个 处 split() 字符串。或 #，然后在文档中逐个搜索每个选择器，但似乎您无法这样做。任何帮助或指导将不胜感激。

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>