Поиск элементов в 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>Первый абзац</p>
     <p>Второй абзац</p>
     <p id="thirdParagraph">Третий абзац</p>
     <p name="fourthParagraph">Четвертый абзац</p>
     <p class="fifthClass">Пятый абзац</p>
     <div id="resultContainer"></div>
    </body>
   
   </html>

   window.onload = function()
   {
    document.getElementById('resultContainer').innerHTML = '<br><b>Пример querySelector:</b><br><br>'+document.querySelector('p').innerHTML;
    document.getElementById('resultContainer').innerHTML += '<br><br><b>Пример querySelectorAll:</b><br><br>'+document.querySelectorAll('p')[1].innerHTML;
    document.getElementById('resultContainer').innerHTML += '<br><br><b>Пример getElementById:</b><br><br>'+document.getElementById('thirdParagraph').innerHTML;
    document.getElementById('resultContainer').innerHTML += '<br><br><b>Пример getElementsByName:</b><br><br>'+document.getElementsByName('fourthParagraph')[0].innerHTML;
    document.getElementById('resultContainer').innerHTML += '<br><br><b>Пример getElementsByTagName:</b><br><br>'+document.getElementsByTagName('title')[0].innerHTML;
    document.getElementById('resultContainer').innerHTML += '<br><br><b>Пример getElementsByClassName:</b><br><br>'+document.getElementsByClassName('fifthClass')[0].innerHTML;
   };

Поиск элементов в DOM-дереве на JavaScript

Задание:

HTML–код (index.html):

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

Результат: