DOMTreeWalker

Parcurgerea nodurilor de tip element ale arborelui DOM via TreeWalker

by Sabin Buraga

HTML

<html>
  <head>
    <meta charset="utf-8" />
    <title>Parcurgerea arborelui DOM</title>
  </head>
  <body>
    <!-- -->
    <p><strong>JS</strong> + <strong>DOM</strong> = &#x1f49a;</p>
    <div id="info"></div>
  </body>
</html>

CSS

* {
  font-family: sans-serif;
  font-size: 110%;
}

JavaScript

// instantiem un obiect TreeWalker
// pentru a parcurge arborele DOM
let calator = document.createTreeWalker(
  document.documentElement,
  // selectam doar elementele
  NodeFilter.SHOW_ELEMENT,
  // ...si le filtram (acceptam doar <p> si <div>)
  {
    acceptNode: nod => {
      if (nod.nodeName == 'P' ||
        nod.nodeName == 'DIV' || 
        nod.nodeName == 'STRONG')
        return NodeFilter.FILTER_ACCEPT;
    }
  }
);

let noduri = [];

// baleiem toate nodurile gasite si le plasam in tabloul 'noduri'
while (calator.nextNode())
  noduri.push(calator.currentNode);

// listam nodurile gasite
let elem = document.getElementById('info');
noduri.forEach(nod => {
  // plasam informatiile in DOM, in <div> 
  // inainte de ultimul nod copil
  elem.insertAdjacentText('beforeend', nod.outerHTML + "\u25CF");
  // si la consola browser-ului Web
  console.log(`Element ${nod.nodeName}: ${nod.textContent}`);
});