Что такое DOM и зачем он нужен?

Александр Мальцев
Александр Мальцев
25K
8
Содержание:
  1. Что такое DOM
  2. Из чего состоит HTML-код страницы
  3. Как строится DOM-дерево документа
  4. Задание
  5. Комментарии

На этом уроке мы рассмотрим, что такое DOM, зачем он нужен, а также то, как он строится.

Что такое DOM

Браузер, когда запрашивает страницу и получает в ответе от сервера её исходный HTML-код, должен сначала его разобрать. В процессе анализа и разбора HTML-кода браузер строит на основе него DOM-дерево.

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

Что такое DOM и какую он играет роль?

DOM – это объектная модель документа, которую браузер создаёт в памяти компьютера на основании HTML-кода, полученного им от сервера.

Если сказать по-простому, то HTML-код – это текст страницы, а DOM – это набор связанных объектов, созданных браузером при парсинге её текста.

В Chrome исходный код страницы, который получает браузер, можно посмотреть во вкладке «Source» на панели «Инструменты веб-разработчика».

Исходный код веб-страницы, который получает браузер Chrome, доступен во вкладке Source на панели Инструменты веб-разработчика

В Chrome инструмента, с помощью которого можно было бы посмотреть созданное им DOM-дерево нет. Но есть представление этого DOM-дерева в виде HTML-кода, оно доступно на вкладке «Elements». С таким представлением DOM веб-разработчику, конечно, намного удобнее работать. Поэтому инструмента, который DOM представлял бы в виде древовидной структуры нет.

Представление DOM-дерева в виде HTML-кода в браузере Chrome

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

При этом DOM документа после его формирования можно изменять. При изменении DOM браузер практически мгновенно перерисовывает изображение страницы. В результате у нас отрисовка страницы всегда соответствует DOM.

Для чтения и изменения DOM программно браузер предоставляет нам DOM API или, другими словами, программный интерфейс. По-простому DOM API – это набор огромного количества различных объектов, их свойств и методов, которые мы можем использовать для чтения и изменения DOM.

Для работы с DOM в большинстве случаев используется JavaScript, т.к. на сегодняшний день это единственный язык программирования, скрипты на котором могут выполняться в браузере.

Зачем нам нужен DOM API? Он нам нужен для того, чтобы мы могли с помощью JavaScript изменять страницу на «лету», т.е. делать её динамической и интерактивной.

DOM API предоставляет нам (разработчикам) огромное количество методов, с помощью которых мы можем менять всё что есть на странице, а также взаимодействовать с пользователем. Т.е. данный программный интерфейс позволяет нам создавать сложные интерфейсы, формы, выполнять обработку действий пользователей, добавлять и удалять различные элементы на странице, изменять их содержимое, свойства (атрибуты), и многое другое.

Сейчас в вебе практически нет сайтов в сценариях которых отсутствовала бы работа с DOM.

Из чего состоит 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, а bodyh1 и div. Элемент div в свою очередь содержит h2 и p.

Теперь рассмотрим, как браузер на основании HTML-кода строит DOM-дерево.

Как строится DOM-дерево документа

Как уже было описано выше браузер строит дерево на основе HTML-элементов и других сущностей исходного кода страницы. При выполнении этого процесса он учитывает вложенность элементов друг в друга.

В результате браузер полученное DOM-дерево использует не только в своей работе, но также предоставляет нам API для удобной работы с ним через JavaScript.

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

В большинстве случаев веб-разработчиков интересуют только объекты (узлы), образованные из HTML-элементов.

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

Элементы, которые находятся непосредственно в некотором элементе являются по отношению к нему детьми. А он для каждого из них является родителем. Кроме этого, все эти элементы по отношению друг к другу являются сиблингами (братьями).

При этом в HTML любой элемент всегда имеет одного родителя (HTML-элемент, в котором он непосредственно расположен). В HTML у элемента не может быть несколько родителей. Исключение составляет только элемент html. У него нет родителя.

Чтобы получить DOM-дерево так как его строит браузер, необходимо просто «выстроить» все элементы в зависимости от их отношения друг к другу.

Создание DOM-дерева выполняется сверху вниз.

При этом корнем DOM-дерева всегда является сам документ (узел document). Далее дерево строится в зависимости от структуры HTML кода.

Например, HTML-код, который мы рассматривали выше будет иметь следующее DOM-дерево:

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

В самом верху этого дерева находится узел document. Данный узел связан с html, он является его ребёнком. Узел html образован элементом html (<html>...</html>). Узлы head (<head>...</head>) и body (<body>...</body>) имеют родительскую связь с html. По отношению друг ту другу они являются сиблингами, т.к. имеют одного родителя. Узел head связан с title (lt;title>...</title>), он является его ребёнком. Узлы h1 и div связаны с body, для них он является родителем. Узел div связан с h2 (<h2>...</h2>) и p (<p>...</p>), они являются его детьми.

Начинается дерево как было уже отмечено выше с объекта (узла) document. Он в свою очередь имеет один дочерний узел, образованный элементом html (<html>...</html>). Элементы head (<head>...</head>) и body (<body>...</body>) находятся в html и, следовательно, являются его детьми. Далее узел head является родительским для title (lt;title>...</title>). Элементы h1 и div вложены в body, значит они являются его детьми. В div непосредственно расположены элементы h2 (<h2>...</h2>) и p (<p>...</p>). Это значит, что узел div для каждого из них является родительским.

Вот так просто строится DOM-дерево в браузере на основании HTML-кода.

Зачем нужно знать, как строится DOM дерево? Во-первых, это понимание той среды, в которой вы хотите что-то изменять. Во-вторых, большинство действий при работе с DOM сводится к поиску (выбору) нужных элементов. Не зная как устроено DOM-дерево и связи между узлами найти какой-то определенный элемент в нём будет достаточно затруднительно.

Задание

На основе DOM-дерева, представленного на рисунке, создайте HTML-код.

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

Комментарии:

  1. Александр
    11 декабря 2019, 18:40
    Еще заметил такой момент: текст изъятый из HTML имеет очень много пробелов с лишних энтеров. Это проблемка.
    1. Александр Мальцев
      12 декабря 2019, 14:35
      Методы JavaScript возвращают контент текстовых узлов так, как это создано в HTML коде.
      На JavaScript удалить лишние пробелы можно так:
      elem.textContent.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '').replace(/\s{2,}/g, ' ')
      
      Обработку строки, если вы работаете на VBA, можно выполнить используя соответствующие методы этого языка.
    2. Александр
      11 декабря 2019, 00:51
      Привет, Все очень круто и наглядно объясняется. Я понимаю, это не к этому уроку но есть вопрос по DOM. Я программирую на VBA и мне нужно добраться ОТДЕЛЬНО до элемента«DWI 605 L». Как это можно сделать? Код внизу
      <h1 class="page-product-header">
      	<span>INTERLINE</span>
      	
      DWI 605 L</h1>
      
      Заранее спасибо
      1. Александр Мальцев
        11 декабря 2019, 03:43
        Привет!
        Вам нужно в VBA получить HTML документ. А далее с помощью методов получить этот текстовый узел.
        ' htmlDoc - переменная, содержащая ссылку на HTMLDocument
        ' получение последнего элемента, находящегося в элементе .page-product-header
        elem = htmlDoc.getElementsByClassName('page-product-header')[0].lastChild
        ' текстовый контент элемента
        elemText = elem.textContent
        
        1. Александр
          11 декабря 2019, 08:33
          спасибо, за подсказку все получилось. Буду изучать JS на этом сайте. А где можно почитать про все эти свойства (доступным языком)?
      2. Александр
        01 октября 2019, 05:10
        Не знаю на сколько правильно получилось, но мне видится так.
        <html>
         <head>
         </head>
         <body>
         <div>
         <div> <h1></h1> </div>
         <div> <h2></h2> <h2></h2> </div>
         </div>
        </body>
        </html>
        1. Александр Мальцев
          01 октября 2019, 14:29
          Немного не так, h1 находится же не внутри div.
          Решение задачи:
          <html>
            <head></head>
            <body>
              <h1></h1>
              <div>
                <h2></h2>
                <h2></h2>
              </div>
              <div>
                <div></div>
              </div>
            </body>
          </html>
          
          1. Александр
            01 октября 2019, 18:30
            Предполагал что не правильно, сейчас смотрю на задание и на схему, там же всё елементарно, вроде каждый день что-то делаю связанное с этим а с такой мелочью не справился, стыдно честно говоря:(
        Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.