chapter14/element_tagName.html

<!doctype html>

<h1>Heading with a <span>span</span> element.</h1>
<p>A paragraph with <span>one</span>, <span>two</span>
  spans.</p>

<script>
  /////////////////
  // My solution //
  /////////////////
/*  function byTagName(node, tagName) {
    // Your code here.
    let arrayOfNodes = [], count = 0;
    // main task
    if (node.nodeName === tagName.toUpperCase()) { arrayOfNodes[0] = node }
    //base case
    if (node.childNodes === 0) { return arrayOfNodes; }
    // recursive case
    for (var i = 0, n; i < node.childNodes.length; i++) {
      if ((n = byTagName(node.childNodes[i],tagName)).length > 0) {
        arrayOfNodes.push(...n);
      }
    }
    // return for recursive case
    return arrayOfNodes;
  }
*/

  ////////////////////
  // Their solution //
  ////////////////////
  function byTagName (node, tagName) {
    const found = [];
    tagName = tagName.toUpperCase();

    // helper function
    function explore (node) {

      for (var i = 0; i < node.childNodes.length; i++) {
        let child = node.childNodes[i];
        // Recursive case, otherwise is a base case condition
        if (child.nodeType === Node.ELEMENT_NODE){
          if (child.nodeName === tagName) { found.push(child)}
          explore(child);
        }
      }

    }

    explore(node);
    return found;

  }
  console.log(byTagName(document.body, "body").length);
  // → 1
  console.log(byTagName(document.body, "h1").length);
  // → 1
  console.log(byTagName(document.body, "span").length);
  // → 3
  let para = document.querySelector("p");
  console.log(byTagName(para, "span").length);
  // → 2
</script>