Главная страница  /  Занятия  /  #6  /  HTML-атрибуты и свойства DOM-узлов

HTML-атрибуты и свойства DOM-узлов

Задание:

Рассказать про связь между HTML-атрибутами и свойствами DOM-узлов.

HTML–код (index.html):

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>HTML-атрибуты и свойства DOM-узлов</title>
     <script src="scripts.js"></script>
    </head>
   
    <body id="bodyId" nonstandartAttribute="nonstandartAttributeValue">
    </body>
   
   </html>

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

   window.onload = function()
   {
    document.body.innerHTML = '<b>Стандартный <nobr>HTML-атрибут (id)</nobr>:</b><br><br>'+document.body.id+'<br><br><br>';
    document.body.innerHTML += '<b>Нестандартный <nobr>HTML-атрибут (nonstandartAttribute)</nobr>:</b><br><br>'+document.body.getAttribute('nonstandartAttribute')+'<br><br><br>';
   
    var allBodyAttributes = document.body.attributes;
   
    document.body.innerHTML += '<b>Все аттрибуты <nobr>HTML-тега</nobr> &lt;body&gt;:</b><br><br>'
    for(var i = 0; i < allBodyAttributes.length; i++)
    {
     document.body.innerHTML += allBodyAttributes[i].name+' –&gt; '+allBodyAttributes[i].value+'<br>';
    }
   };

Результат:

Результат выполнения задания можно посмотреть здесь.