На этом уроке мы рассмотрим, что такое объектная модель документа, и какую роль она играет при написании сценариев на языке JavaScript.
Что такое объектная модель документа (DOM)?
Объектная модель документа (DOM — Document Object Model) - это множество объектов, которые браузер создаёт в памяти компьютера (браузера) на основе кода HTML. В JavaScript она используется для создания динамических веб-страниц, т.е. таких страниц которые мгновенно изменяются, если изменяется объектная модель этого документа. Т.е. веб-разработчик при создании таких страниц работает не с HTML кодом данной страницы, а с объектами (DOM), которые браузер создаёт на основе этого кода.
При написании сценариев JavaScript вы можете не только изменять свойства различных объектов, но также добавлять новые объекты (элементы HTML) и удалять существующие. Все изменения, проводимые с объектной моделью документа, мгновенно отражаются на веб-странице.
Структура HTML кода
Но перед тем как перейти к изучению объектной модели документа необходимо вспомнить что из себя представляет исходный код веб-страницы (HTML документа).
Исходный код веб-страницы (HTML документа) состоит из HTML тегов и текста. Теги - это базовая синтаксическая конструкция кода HTML. Большинство тегов являются парными, т.е. один из них открывающий, а другой закрывающий. Одна такая пара тегов образует элемент HTML. В документе HTML элементы вкладываются друг в друга. В итоге веб-страница (HTML документ) представляет собой множество вложенных друг в друга элементов HTML.
<html>
<head>
<title>Заголовок страницы</title>
</head>
<body>
<h1>Название статьи</h1>
<div>
<h2>Раздел статьи</h2>
<p>Содержимое статьи</p>
</div>
</body>
</html>
html, в него вложены элементы head и body. Элемент head содержит элемент title, а элемент body содержит элементы h1 и div. Элемент div в свою очередь содержит элемент h2 и p.
Дерево DOM
Браузер, получая код HTML из интернета, сначала строит дерево узлов (объектов) в своей памяти. А уже потом на основе этого дерева "рисует" картинку этой страницы в своём окне или вкладке.
Связи между узлами (объектами, элементами) определяются на основе того что каждый элемент в HTML документе вложен в какой-то другой элемент. Элемент, который содержит другие элементы, по отношению к ним является родителем. У любого элемента в HTML коде есть свой родитель и притом только один. Если элемент содержит другие элементы, то для него они являются дочерними (детьми, прямыми потомками). Один элемент может содержать сколько угодно много дочерних элементов. Если все элементы HTML кода "выстроить" в зависимости от их отношения друг к другу, то у нас в результате получится дерево. Строится это дерево браузером сверху вниз.
В самом верху этого дерева находится узел document. Данный узел имеет один дочерний узел html, который образован элементом html (<html>...</html>). Узлы head (<head>...</head>) и body (<body>...</body>) вложены в узел html и по отношению к нему являются его дочерними узлами. Узел head содержит один дочерний узел title (<title>...</title>). Узлы h1 и div вложены в узел body, который для них является родительским. Узел div содержит узлы h2 (<h2>...</h2>) и p (<p>...</p>), которые по отношению к нему являются его дочерними узлами.
Браузер построив на основе кода HTML дерево узлов всегда может осуществить обратную операцию на основе этого дерева создать код HTML.
Основная работа с HTML страницей в JavaScript состоит в том, чтобы работать с этими узлами. Как только вы изменяется свойство этих узлов в дереве, добавляете новые или удаляете существующие, то автоматически происходят изменения на экране пользователя и автоматически изменяется код HTML. Т.е. происходят обратные действия, на основе дерева строится код HTML.
Задание
На основе дерева DOM, представленного на рисунке, создать код HTML.
Решение задачи:
<html> <head></head> <body> <h1></h1> <div> <h2></h2> <h2></h2> </div> <div> <div></div> </div> </body> </html>