title: Recursing for elements by order
body: <p>Today in class we were given a task to 'recreate' the jQuery functionality<br> (I don't know why, I guess the teacher is sadistic).</p>
  
  <p>We were given the following instruction:<br>
  Using only pure javascript (not even ECMEScript 2015) create a function '$' that will receive a tag / id / class.<br></p>
  
  <ul>
  <li><p>If you're given only one token [ e.g $("#id)] return the suitable elements.</p></li>
  <li><p>If you're given more than one token [ e.g $("nav div div p")]- search hierarchically for the last token.</p></li>
  </ul>
  
  <p><strong>Input:</strong> $('nav div p');</p>
  
  <p><strong>Goal:</strong> Get all the p elements that has a div above them which has a nav above the div.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>if (query.split(" ").length &gt; 1) {
  
    var first = query.split(" ")[0];
    var rest = query.split(" ").slice(1);
    var curr_elements;
  
    if (first.match(/^#.*/i)) {
      curr_elements = (document.getElementById(first.substring(1)));
    } else if (query.match(/^\..*/i)) {
      curr_elements = document.getElementsByClassName(first.substring(1));
    } else if (query.match(/^\w.*/i)) {
      curr_elements = document.getElementsByTagName(first);
    }
    curr_elements = [].slice.call(curr_elements);
  
    for (var e = 0; e &lt; curr_elements.length; e++) {
      if (curr_elements[e].hasChildNodes()) {
        for (var i = 0; i &lt; rest.length; i++) {
          var temp = rest[i];
          var children;
          if (temp.match(/^#.*/i)) {
            children = (document.getElementById(temp.substring(1)));
          } else if (temp.match(/^\..*/i)) {
            children = document.getElementsByClassName(temp.substring(1));
          } else if (temp.match(/^\w.*/i)) {
            children = document.getElementsByTagName(temp);
          }
          alert(children);
          //curr_elements += children;
        }
      }
    }
  
    this.elements = curr_elements;
  } else {
    if (query.match(/^#.*/i)) {
      this.elements.push(document.getElementById(query.substring(1)));
    } else if (query.match(/^\..*/i)) {
      this.elements = document.getElementsByClassName(query.substring(1));
    } else if (query.match(/^\w.*/i)) {
      this.elements = document.getElementsByTagName(query);
    }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav&gt;
    &lt;p id="1"&gt;&lt;/p&gt;
  &lt;/nav&gt;
  
  &lt;nav&gt;
    &lt;div&gt;
    &lt;/div&gt;
    &lt;p&gt;
      &lt;div&gt;
        &lt;p id=2&gt;&lt;/p&gt;
      &lt;/div&gt;
    &lt;/p&gt;
  &lt;/nav&gt;
  &lt;nav&gt;
    &lt;div&gt;
      &lt;p id="3"&gt;&lt;/p&gt;
      &lt;p id="4"&gt;&lt;/p&gt;
      &lt;div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;nav&gt;
    &lt;div&gt;
      &lt;div&gt;
        &lt;div&gt;
          &lt;p id="5"&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h2>Variables:</h2>
  
  <p><strong>query:</strong> the first arg, is tag / id / class name.<br>
  <strong>curr_elements:</strong> array-to-be for temporarily storing the elements I get.<br>
  <strong>this.elements:</strong> the final HTMLCollection.<br></p>
  
  <p>The part relating to single token ($("p");) works fine, but I'm having trouble figuring out how to recurse / iterate over the elements to get the paragraphs.</p>
  
  <p>Hoping to get someone's idea / advice on how to continue.</p>