JSFiddle - React, Tailwind, and code Playground

by ronilan

HTML

<div>
  <ul>
    <li class="green">myQuerySelectAll</li>
    <li id="li-b">Recursive</li>
    <li>c</li>
  </ul>
</div>

<div class="green">
<div class="green">
<div class="green">
<div class="green">
<div id ="two-classes" class="green large">
hi
</div>
</div>
</div>
</div>
</div>

CSS

.green {
  background-color: green;
}

.large {
  font-size: 48px;
}

JavaScript

// implement your own version of .querySelectorAll();



HTMLDocument.prototype.QuerySelectorAll = function(selector) {

  // Returns a list of the elements within the root element (using depth-first pre-order traversal of the document's nodes) that match the specified group of selectors. The object returned is a NodeList.

  /*
  * 
  * @param string selector
  * @param root element
  * @return array elements
  */
  function myQuerySelectAll(root, selector) {

    var result = [];
    return selectAllRecursive(root);

    function selectorType (selector) {
      var result = "tag";

      selector[0] === "." ? result = "class" : null;
      selector[0] === "#" ? result = "id" : null;

      return result;
    }

    function selectorMatch (el) {
      var result = false;

      // tag
      selectorType(selector) === 'tag' && typeof el.tagName !== 'undefined' && el.tagName.toLowerCase() === selector.toLowerCase() ? result = true : null;

      // .class
      selectorType(selector) === 'class' && typeof el.className !== 'undefined' && el.className.toLowerCase() === selector.substr(1).toLowerCase() ? result = true : null;

      // #id
      selectorType(selector) === 'id' && typeof el.id !== 'undefined' && el.id.toLowerCase() === selector.substr(1).toLowerCase() ? result = true : null;

      return result;
    }

    function selectAllRecursive(root) {

      var el = root;
      var max = root.childNodes.length;
      var i = 0;

      while(i < max ) {
        i++;

        if (root.childNodes[i]) {

          if (selectorMatch(root.childNodes[i])) {
            result.push(root.childNodes[i]);
          }

          selectAllRecursive(root.childNodes[i]);
        } 
      };

      return result;

    }
  }

	// do it
	return myQuerySelectAll(this, selector);
  
};

console.log(document.QuerySelectorAll('.green'));
console.log(document.QuerySelectorAll('div'));
console.log(document.QuerySelectorAll('li'));
console.log(document.QuerySelectorAll('#li-b'));