Построение DOM-дерева с помощью JavaScript

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Построение DOM-дерева с помощью JavaScript</title>
     <script src="scripts.js"></script>
    </head>
   
    <body>
     <p><span><b>Обход DOM-элементов на&nbsp;JavaScript:</b></span></p>
     <p id="domTreeParagraph">Этой строки не&nbsp;будет, здесь появится DOM-дерево</p>
    </body>
   
   </html>

   window.onload = function()
   {
    function getDOMTree()
    {
     var currentDOMTreeArrayElement = 0;
     var nbspString = '&nbsp;';
     var tabString = '';
     var stack = [];
     var currentDOMElementLevel = 0;
     var currentDOMElement = document.documentElement;
     var DOMTreeArray = [];
     var DOMTreeString = '';
     var currentDOMElementType = true;
   
     while(currentDOMElement)
     {
      if(currentDOMElementType)
      {
       tabString = '';
       for(let j = 0; j < currentDOMElementLevel*2-2; j++) tabString += nbspString;
       if(currentDOMElementLevel > 0) tabString += '<font color="#c0c0c0">&#9492;&#9472;</font>';
       switch(currentDOMElement.nodeType)
       {
        case 1:
         DOMTreeArray[currentDOMTreeArrayElement] = tabString+'&lt;'+currentDOMElement.tagName.toLowerCase()+'&gt;<br>';
         currentDOMTreeArrayElement++;
         break;
   
        case 3:
         if(currentDOMElement.nodeValue.match(/\S{1,}/))
         {
          DOMTreeArray[currentDOMTreeArrayElement] = tabString+currentDOMElement.nodeValue+'<br>';
          currentDOMTreeArrayElement++;
         }
   
        default:
         break;
       }
      }
   
      if(currentDOMElementType && currentDOMElement['firstChild'])
      {
       currentDOMElementType = true;
       currentDOMElementLevel++;
       stack.push(currentDOMElement);
       currentDOMElement = currentDOMElement['firstChild'];
      }
      else if(currentDOMElement['nextSibling'])
      {
       currentDOMElementType = true;
       currentDOMElement = currentDOMElement['nextSibling'];
      }
      else
      {
       currentDOMElementType = false;
       currentDOMElementLevel--;
       currentDOMElement = stack.pop();
       if(currentDOMElement)
       {
        tabString = '';
        for(let j = 0; j < currentDOMElementLevel*2-2; j++) tabString += nbspString;
        if(currentDOMElementLevel > 0) tabString += '<font color="#c0c0c0">&#9492;&#9472;</font>';
        DOMTreeArray[currentDOMTreeArrayElement] = tabString+'&lt;/'+currentDOMElement.tagName.toLowerCase()+'&gt;<br>';
        currentDOMTreeArrayElement++;
       }
      }
     }
     return DOMTreeArray.join('');
    }
   
    DOMTreeString = getDOMTree();
    document.getElementById('domTreeParagraph').innerHTML = '<pre>'+DOMTreeString+'</pre>';
   };

Построение DOM-дерева с помощью JavaScript

Задание:

HTML–код (index.html):

JS–скрипты (scripts.js):

Результат: