我需要编写一个函数,该函数采用 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() 字符串。或 #,然后在文档中逐个搜索每个选择器,但似乎您无法这样做。任何帮助或指导将不胜感激。
最佳答案
一种选择是递归搜索文档的 .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>
关于javascript - Vanilla JavaScript 函数在给定 CSS 选择器的情况下查找 DOM 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57066318/