Что такое DOM и зачем он нужен?
Александр Мальцев
20K
1
На этом уроке мы рассмотрим, что такое DOM, зачем он нужен, а также то, как он строится.
Что такое DOM
Браузер, когда запрашивает страницу и получает в ответе от сервера её исходный HTML-код, должен сначала его разобрать. В процессе анализа и разбора HTML-кода браузер строит на основе него DOM-дерево.
После выполнения этого действия и ряда других браузер приступает к отрисовке страницы. В этом процессе он, конечно, уже использует созданное им DOM-дерево, а не исходный HTML-код.
DOM – это объектная модель документа, которую браузер создаёт в памяти компьютера на основании HTML-кода, полученного им от сервера.
Если сказать по-простому, то HTML-код – это текст страницы, а DOM – это набор связанных объектов, созданных браузером при парсинге её текста.
В Chrome исходный код страницы, который получает браузер, можно посмотреть во вкладке «Source» на панели «Инструменты веб-разработчика».
В Chrome инструмента, с помощью которого можно было бы посмотреть созданное им DOM-дерево нет. Но есть представление этого DOM-дерева в виде HTML-кода, оно доступно на вкладке «Elements». С таким представлением DOM веб-разработчику, конечно, намного удобнее работать. Поэтому инструмента, который DOM представлял бы в виде древовидной структуры нет.
Объекты в этой модели образуются практически из всего, что есть в 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, а body – h1 и 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-дерево:
В самом верху этого дерева находится узел 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 удалить лишние пробелы можно так:
elem.textContent.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '').replace(/\s{2,}/g, ' ')Обработку строки, если вы работаете на VBA, можно выполнить используя соответствующие методы этого языка.Заранее спасибо
Вам нужно в VBA получить HTML документ. А далее с помощью методов получить этот текстовый узел.
' htmlDoc - переменная, содержащая ссылку на HTMLDocument ' получение последнего элемента, находящегося в элементе .page-product-header elem = htmlDoc.getElementsByClassName('page-product-header')[0].lastChild ' текстовый контент элемента elemText = elem.textContentРешение задачи:
<html> <head></head> <body> <h1></h1> <div> <h2></h2> <h2></h2> </div> <div> <div></div> </div> </body> </html>