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;
}

给定CSS选择器的Vanilla JavaScript函数查找DOM元素

2 个答案: