时间戳

首页 > 解决方案 > 在给定 CSS 选择器的情况下查找 DOM 元素的 Vanilla JavaScript 函数

javascript - 在给定 CSS 选择器的情况下查找 DOM 元素的 Vanilla JavaScript 函数

问题描述

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

我有各种测试 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。我的想法是在每个 . 或 # 然后逐个链接搜索每个选择器的文档，但似乎你不能这样做。任何帮助或指导将不胜感激。

标签： javascripthtmlregexdom

解决方案

一种选择是递归搜索文档的.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>

推荐阅读