Javascript - DOM

12:18 , 12 Август 2019
Javascript - DOM

Объектная модель документа (DOM) лежит в основе каждой HTML-страницы. DOM возникла как спецификация, позволяющая переносить сценарии JavaScript и Java-программы среди веб-браузеров. Он представляет страницу, чтобы программы могли изменять структуру, стиль и содержимое документа. DOM представляет документ как узлы и объекты. Таким образом, языки программирования могут подключаться к странице.




Структура дерева

DOM представляет собой документ как иерархическое дерево узлов, которое может иметь родителей, детей и братьев и сестер, и это определяется его положением в древовидной структуре. Одной из характеристик DOM является то, как она обрабатывает атрибуты. Атрибуты считаются свойством узла элемента и состоят из имени и пары значений. Кроме того, в дереве есть несколько типов узлов, каждый из которых представляет собой разную информацию или разметку в документе HTML. Каждый тип узла имеет разные свойства, методы, данные, события, и каждый из них может иметь отношения с другими узлами.



DOM и HTML

Когда веб-страница загружается в браузере, механизм рендеринга начнет синтаксический анализ документа HTML и преобразование элементов в узлы DOM в дереве, называемом «деревом контента». Каждый элемент в документе будет иметь соответствующее присутствие в DOM.


HTML файл:


<!DOCTYPE html>
<html>
  <head>
    <title>The DOM</title>
  </head>
  <body>
    <h1>Document Object Model</h1>
    <p id="pr">Test Paragraph</p>
  </body>
</html>


DOM-представление HTML-тегов
Теги называются узлами элементов (или просто элементами). Вложенные теги становятся дочерними. В результате мы имеем дерево элементов: находится в корне, затем и являются его дочерними элементами и т. Д. Узлы внутри DOM представлены списками узлов, подобными массиву, и сами отдельные узлы могут доступ через их индекс. Используя приведенное выше дерево узлов, вы можете получить доступ к любому элементу в DOM.


JS файл:


document.childNodes[1] //представляет HTMLElment, то есть тег <html>.
document.childNodes[1].childNodes[1] //представляет HTMLBOdyElement, то есть тег <body>.
document.childNodes[1].childNodes[1].childNodes[1] //представляет HTMLHeadingElement, то есть тег <h1>.





Вопросы / Комментарии / Отзывы