HTML редактор | ИТ Шеф

<html>

<head>
  <title>Заголовок страницы</title>
  <style>
    body {
      font-family: monospace;
    }
  </style>
</head>

<body>
  <h1>Название статьи</h1>
  <div>
    <h2>Раздел статьи</h2>
    <p>Содержимое статьи</p>
  </div>

<script>
    var output = [], depth = 0, currentNode = document.firstChild, type = true, stack = [];
    function tab(depth) {
      var output = '';
      if (depth !== 0) {
        for (var i = 0; i < depth; i++) {
          output += '|';
        }
      }
      return output + '-';
    }
    while (currentNode) {
      if (type) {
        if (currentNode.nodeType === 3) {
          output.push(tab(depth) + '<b>#text</b>');
        } else if (currentNode.nodeType === 1) {
          if (currentNode.id) {
            output.push(tab(depth) + '<b>' + currentNode.tagName.toLowerCase() + '#' + currentNode.id + '</b>');
          } else {
            output.push(tab(depth) + '<b>' + currentNode.tagName.toLowerCase() + '</b>');
          }
        }
      }
      if (type && currentNode.firstChild) {
        type = true;
        depth++;
        stack.push(currentNode);
        currentNode = currentNode.firstChild;
      } else if (currentNode.nextSibling) {
        type = true;
        currentNode = currentNode.nextSibling;
      } else {
        type = false;
        if (currentNode.parentElement) {
          if ((currentNode.nodeType !== 3 && currentNode.parentElement.childNodes.length !== 1) || (currentNode.nodeType == 3 & currentNode.parentElement.childNodes.length >= 1)) {
            depth--;
          } 
        }
        currentNode = stack.pop();
      }
    }

document.write('<br><b>DOM-структура документа:</b><br>');
    document.write(output.join('<br>'));
  </script>

</body>

</html>