Another DOM Walker

Tutorials of (Another dom walker) by Doubleswirve

<!DOCTYPE html>
<html >
<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/ */
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/ */
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));

This awesome code ( Another DOM Walker ) is write by doubleswirve, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © doubleswirve