HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>element vs text</title>
</head>
<body>
  <div id="box"><span>Hello</span><span>World</span></div>
  <pre id="out">Waiting...</pre>
  <script>
    var box = document.getElementById("box");
    var itEl = document.createNodeIterator(box, NodeFilter.SHOW_ELEMENT);
    var itText = document.createNodeIterator(box, NodeFilter.SHOW_TEXT);
    var elNames = [];
    var textValues = [];
    var n;
    while ((n = itEl.nextNode())) elNames.push(n.nodeName);
    while ((n = itText.nextNode())) {
      var v = n.nodeValue.trim();
      if (v) textValues.push(v);
    }
    document.getElementById("out").textContent = JSON.stringify({ elements: elNames, text: textValues });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

NodeIterator.whatToShow — SHOW_ELEMENT vs SHOW_TEXT (Try It)