Работа со свойствами <nobr>DOM-узлов</nobr> в 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>
     <!-- Начало body -->
     <br>
     Текст в&nbsp;теге body.<br><br>
    </body>
   </html>

   window.onload = function()
   {
    var bodyInnerHtml = document.body.innerHTML;
    var bodyOuterHtml = document.body.outerHTML;
   
    bodyInnerHtml = bodyInnerHtml.replace(/\</g, '&lt;');
    bodyInnerHtml = bodyInnerHtml.replace(/\>/g, '&gt;');
    bodyInnerHtml = bodyInnerHtml.replace(/\n{2,}/g, '\n');
    bodyInnerHtml = bodyInnerHtml.replace(/\s{1,}\n/g, '<br>');
    bodyInnerHtml = bodyInnerHtml.replace(/^\n|\n$/g, '');
    bodyInnerHtml = bodyInnerHtml.replace(/\n/g, '<br>');
    bodyInnerHtml = bodyInnerHtml.replace(/\s/g, '&nbsp;');
   
    bodyOuterHtml = bodyOuterHtml.replace(/\</g, '&lt;');
    bodyOuterHtml = bodyOuterHtml.replace(/\>/g, '&gt;');
    bodyOuterHtml = bodyOuterHtml.replace(/\n{2,}/g, '\n');
    bodyOuterHtml = bodyOuterHtml.replace(/\s{1,}\n/g, '<br>');
    bodyOuterHtml = bodyOuterHtml.replace(/^\n|\n$/g, '');
    bodyOuterHtml = bodyOuterHtml.replace(/\n/g, '<br>');
    bodyOuterHtml = bodyOuterHtml.replace(/\s/g, '&nbsp;');
   
    var resultContainer = document.createElement('div');
    document.body.append(resultContainer);
    resultContainer.innerHTML += '<br><b>&lt;body&gt; innerHTML:</b><br><br>'+bodyInnerHtml+'<br><br><b>&lt;body&gt; outerHTML:</b><br><br>'+bodyOuterHtml+'<br><br><br><b>Тип, тег и&nbsp;содержимое <nobr>DOM-узлов</nobr>:</b><br>';
   
   
    var nodesCollection = document.body.childNodes;
    var processedNodeValue = '';
   
    for(var i = 0; i < nodesCollection.length-1; i++)
    {
     switch(nodesCollection[i].nodeType)
     {
      case 1:
       resultContainer.innerHTML += '<br>DOM-element: &lt;'+nodesCollection[i].tagName.toLowerCase()+'&gt;';
       break;
   
      case 3:
       processedNodeValue = nodesCollection[i].nodeValue.replace(/^\s{1,}|\s{1,}$|\n/g, '');
       if(processedNodeValue) resultContainer.innerHTML += '<br>'+nodesCollection[i].nodeName+': «'+processedNodeValue+'»';
       break;
   
      case 8:
       resultContainer.innerHTML += '<br>'+nodesCollection[i].nodeName+': «'+nodesCollection[i].nodeValue+'»';
       break;
     }
    }
   };

Работа со свойствами DOM-узлов в JavaScript

Задание:

HTML–код (index.html):

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

Результат: