Структура JavaScript DOM
Содержание
Объектная модель документа (DOM) лежит в основе каждой HTML-страницы. DOM возникла как спецификация, позволяющая переносить сценарии JavaScript и Java-программы среди веб-браузеров. Он представляет страницу, чтобы программы могли изменять структуру, стиль и содержимое документа. DOM представляет документ как узлы и объекты. Таким образом, языки программирования могут подключаться к странице.
Структура дерева
DOM представляет собой документ как иерархическое дерево узлов, которое может иметь родителей, детей и братьев и сестер, и это определяется его положением в древовидной структуре. Одной из характеристик DOM является то, как она обрабатывает атрибуты. Атрибуты считаются свойством узла элемента и состоят из имени и пары значений. Кроме того, в дереве есть несколько типов узлов, каждый из которых представляет собой разную информацию или разметку в документе HTML. Каждый тип узла имеет разные свойства, методы, данные, события, и каждый из них может иметь отношения с другими узлами.
DOM и HTML
Когда веб-страница загружается в браузере, механизм рендеринга начнет синтаксический анализ документа HTML и преобразование элементов в узлы DOM в дереве, называемом «деревом контента». Каждый элемент в документе будет иметь соответствующее присутствие в DOM.
HTML
The DOM Document Object Model
Test Paragraph
DOM-представление HTML-тегов
Теги называются узлами элементов (или просто элементами). Вложенные теги становятся дочерними. В результате мы имеем дерево элементов: находится в корне, затем
и являются его дочерними элементами и т. Д. Узлы внутри DOM представлены списками узлов, подобными массиву, и сами отдельные узлы могут доступ через их индекс. Используя приведенное выше дерево узлов, вы можете получить доступ к любому элементу в DOM.Пример
document.childNodes[1].childNodes[1].childNodes[1]
является
..document.childNodes[1] : represents the HTMLElment, that is tag. document.childNodes[1].childNodes[1] : represents HTMLBOdyElement, that is tag document.childNodes[1].childNodes[1].childNodes[1] : represents HTMLHeadingElement, that is
tag.