JavaScript - Объектная модель документа (DOM)

На этом уроке мы рассмотрим, что такое объектная модель документа, и какую роль она играет при написании сценариев на языке JavaScript.

Объектная модель документа (DOM — Document Object Model) - это множество объектов, которые браузер создаёт в памяти компьютера (браузера) на основе кода HTML. В JavaScript она используется для создания динамических веб-страниц, т.е. таких страниц которые мгновенно изменяются, если изменяется объектная модель этого документа. Т.е. веб-разработчик при создании таких страниц работает не с HTML кодом данной страницы, а с объектами (DOM), которые браузер создаёт на основе этого кода.

JavaScript - динамические веб-страницы

При написании сценариев 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.

Браузер, получая код HTML из интернета, сначала строит дерево узлов (объектов) в своей памяти. А уже потом на основе этого дерева "рисует" картинку этой страницы в своём окне или вкладке.

JavaScript - код HTML и DOM

Дерево DOM - это множество узлов (объектов, элементов) связанных друг с другом. При этом каждый элемент HTML образует узел в этом дереве.

Связи между узлами (объектами, элементами) определяются на основе того что каждый элемент в HTML документе вложен в какой-то другой элемент. Элемент, который содержит другие элементы, по отношению к ним является родителем. У любого элемента в HTML коде есть свой родитель и притом только один. Если элемент содержит другие элементы, то для него они являются дочерними (детьми, прямыми потомками). Один элемент может содержать сколько угодно много дочерних элементов. Если все элементы HTML кода "выстроить" в зависимости от их отношения друг к другу, то у нас в результате получится дерево. Строится это дерево браузером сверху вниз.

JavaScript - объектная модель документа (DOM)

В самом верху этого дерева находится узел 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.

JavaScript - дерево DOM (задание)



   JavaScript и jQuery 0    2766 0

Комментарии (0)

    Вы должны авторизоваться, чтобы оставлять комментарии.