MENU


Traversing & Comparing Nodes


RESETRUNFULL
<!DOCTYPE html><html><head></head><body><div>
    <p><span>1a</span>1b<span>1c</span></p>
    <p><span>2a</span>2b<span>2c</span></p>
    <p><span>3a</span>3b<span>3c</span></p></div><pre style="background:yellow;"></pre><button>Try it</button><script>var m = document.body.children[0].childNodes[1].firstChild.nextSibling.previousSibling.parentNode.parentNode.parentElement;
    document.querySelector("pre").innerHTML = ".isEqualNode(): " +m.isEqualNode(document.body)+"\n"+".isSameNode(): "+m.isSameNode(document.body)+"\n"+".isConnected: "+m.isConnected+"\n"+".clone().isEqualNode(): "+m.cloneNode(true).isEqualNode(document.body)+"\n"+".clone().isSameNode(): "+
          m.cloneNode(true).isSameNode(document.body)+"\n"+".clone().isConnected: "+
     m.cloneNode(true).isConnected+"\n"+"text content: "+m.children[0].textContent;console.log(m.nodeName);  // BODYconsole.log(m.nodeType);  // 1console.log(m.nodeValue); // nullconsole.log(m.querySelector("button").childNodes[0].
                      nodeValue);  // Try it</script></body></html>
Call a function recursively to parse an HTML document.
RESETRUNFULL
<!DOCTYPE html><html><body>
    <div>
        hello <span>world </span>
        <p> its a bright and sunny day </p>
      </div>
   <script>
      var a=[];
      function getChildText(e){
         e.childNodes.forEach(c=>{
            if (c.nodeType==c.TEXT_NODE){
               let t = c.textContent.trim();
               if (t) a.push(t);
            } else if (c.tagName!="SCRIPT") getChildText(c);
         });
      }
      getChildText(document.body);
      console.log(a);
   </script></body></html>