Another DOM Walker

In this example below you will see how to do a Another DOM Walker with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by doubleswirve, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright doubleswirve ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Another DOM Walker</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="post">
  <h1><a href="#">Some Title</a></h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum aperiam voluptates expedita tempore molestias beatae ratione eveniet voluptas
    minima soluta a porro ullam vero libero quia facilis consequatur et fuga!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro neque fuga ut similique alias ex sapiente tempora et facere quibusdam quidem
    explicabo laudantium voluptatibus voluptates earum rerum obcaecati esse reiciendis.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse distinctio a ipsum dolore iusto quaerat error incidunt amet sunt ut non eius
    assumenda itaque nihil dolores. Facilis aliquam similique non.
  </p>
  <ul>
    <li><strong>Lorem ipsum</strong> dolor sit <a href="#">amet, <em>consectetuer</em></a> adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
  </ul>  
  <h2><a href="#">Some Subtitle</a></h2>
  <p>Some <em>emphasized</em> text</p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum aperiam voluptates expedita tempore molestias beatae ratione eveniet voluptas
    minima soluta a porro ullam vero libero quia facilis consequatur et fuga!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro neque fuga ut similique alias ex sapiente tempora et facere quibusdam quidem
    explicabo laudantium voluptatibus voluptates earum rerum obcaecati esse reiciendis.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse distinctio a ipsum dolore iusto quaerat error incidunt amet sunt ut non eius
    assumenda itaque nihil dolores. Facilis aliquam similique non.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum aperiam voluptates expedita tempore molestias beatae ratione eveniet voluptas
    minima soluta a porro ullam vero libero quia facilis consequatur et fuga!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro neque fuga ut similique alias ex sapiente tempora et facere quibusdam quidem
    explicabo laudantium voluptatibus voluptates earum rerum obcaecati esse reiciendis.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse distinctio a ipsum dolore iusto quaerat error incidunt amet sunt ut non eius
    assumenda itaque nihil dolores. Facilis aliquam similique non.
  </p>
  <ul>
    <li><strong>Lorem ipsum</strong> dolor sit <a href="#">amet, <em>consectetuer</em></a> adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
  </ul>
  <h2><a href="#">Another Subtitle</a></h2>
  <ul>
    <li><strong>Lorem ipsum</strong> dolor sit <a href="#">amet, <em>consectetuer</em></a> adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
  </ul>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum aperiam voluptates expedita tempore molestias beatae ratione eveniet voluptas
    minima soluta a porro ullam vero libero quia facilis consequatur et fuga!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro neque fuga ut similique alias ex sapiente tempora et facere quibusdam quidem
    explicabo laudantium voluptatibus voluptates earum rerum obcaecati esse reiciendis.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse distinctio a ipsum dolore iusto quaerat error incidunt amet sunt ut non eius
    assumenda itaque nihil dolores. Facilis aliquam similique non.
  </p>
</div>

<pre id="log"></pre>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/doubleswirve/another-dom-walker-ABCyb */
div, pre {
  float: left;
  margin: 10px; padding: 20px;
  width: 300px;
  border-radius: 5px; 
}

div {
  background: #b8ffeb;
  color: #333;
  font-family: sans-serif;
  font-size: 13px;
}

a {
  color: #222;
  text-decoration: none;
}

pre {
  background: #ffeb9c;
  color: #333;
  font-family: Consolas;
  font-size: 13px;
  text-shadow: 1px 1px rgba(255, 0, 0, 0.3);
}

/*Downloaded from https://www.codeseek.co/doubleswirve/another-dom-walker-ABCyb */
var post = document.getElementById('post')
  , log  = document.getElementById('log');

function puts(msg) {
  var inner = log.innerHTML;
  msg = JSON.stringify(msg, undefined, 2);
  log.innerHTML = inner ? inner + '\n' + msg : msg;
}

function eq(a, b) {
  var len = a.length;
  if (len != b.length) return false;
  for (var i = 0; i < len; i += 1) {
    if (a[i] != b[i]) return false;
  }
  return true;
}

function walk(node, iter) {
  iter(node);
  node = node.firstChild;
  while (node) {
    walk(node, iter);
    node = node.nextSibling;
  }
}

function walkr(node, iter) {
  function _iter(node) {
    var ch = node.childNodes;
    iter(node);
    if (ch.length > 0) {
      _sib(node.firstChild);
    }
  }
  
  function _sib(node) {
    var sib = node.nextSibling;
    _iter(node);
    if (sib) _sib(sib);
  }
  _iter(node);
}



var LS = [], KS = [];

var t = Date.now();

puts('before walk');

walk(post, function(node){ if (3 == node.nodeType) { LS.push(node.nodeValue); } });

//puts(LS);

puts(Date.now() - t);

t = Date.now();

walkr(post, function(node){ if (3 == node.nodeType) { KS.push(node.nodeValue); } });

puts(Date.now() - t);

puts(eq(LS, KS));

Comments