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

Question

I need to write a function that takes a CSS Selector as a parameter and returns an array of DOM elements matching this selector. I have to follow some rules.

• I cannot use any JS libraries.
• I cannot use querySelector/querySelectorAll.

I have a variety of test CSS selectors that I need to test my function. I think I can pass the easy ones where they're either a single tag name, class name or ID name. Then I can just do some if/else statements and call either document.getElementsByTag/Class/ID etc to get the elements.

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

My problem is now if there are multiple selectors in a single query. Eg i am not sure how to handle the selector $div.a_class#an_id . My thinking was to split() the string at each . or # and then chain search the document for each selector one by one, but it appears you can't do that. Any help or guidance would be greatly appreciated.

Answer 1

One option is to recursively search through the document's .children , and check whether the element being iterated element .matches the selector. If it does, push it to an array:

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