Rivalry2

HTML Diff

4 added 12 removed

Original 2026-01-01

Modified 2026-02-26

1 Фронтенд-разработка непрерывно совершенствуются. Постоянно появляются новые технологии, с помощью которых создаются веб-страницы и браузерные движки для отображения этих самых веб-страниц. Буквально каждый год выпускаются новые версии JavaScript-фреймворков, которые исправляют недочеты языка и делают разработку веб-страниц более комфортной.

2 Тем не менее основа всей фронтенд-разработки остается незыблемой. Когда пользователь открывает веб-страницу, браузер совершает одни и те же действия:

3 <ul><li>Получает исходный текст этой страницы с удаленного сервера в формате HTML</li>

4 <li>Производит ее разбор - еще его называютпарсингом</li>

5 <li>Строит из полученной информации модель документа и отображает пользователю результат на экране в графическом виде</li>

6 </ul>Эта модель документа - это особый вид дерева, которое можно читать и изменять при помощи JavaScript так, чтобы изменение сразу отображались пользователь на экране. Сегодня мы детально разберем особенности этих деревьев, на которых и построены современные сайты.

7 <h2>Свойства DOM-дерева</h2>

8 Модель документа, которую браузер строит после парсинга, называетсяDOM- это сокращение отDocument Object Model(объектная модель документа).

9 Это интерфейсный подход, который был придуман для поддержки работы с документами при помощи языков программирования. В таком подходе предполагается, что каждый элемент документа представляет собой некийобъект- блок со своими определенными свойствами и ссылками на другие блоки.

10 Рассмотрим на примере разбиение страницы на такие блоки:

11 Страницу с этого рисунка можно представить в виде HTML-разметки:

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

13 Следовательно, такой документ можно представить в виде дерева:

14 Как видите, вложенные элементы превратились в дочерние узлы, а HTML-атрибуты - в набор значений, хранящихся в узле. Этот вид документа как раз и называетсяDOM-деревом.

15 DOM-дерево - это один из способов представления одного и того же документа. Для браузера он имеет вид HTML-разметки, а для человека - графического представления, основанного на вложенности блоков друг в друга.

16 Древовидное представление документа способствовало развитию JavaScript - так в языке появилась функциональность для управления числом и составом элементов веб-страницы. Еще DOM-дерево подходит для описания интерфейсов. Также его можно использовать в работе с XML и другими способами описания документа.

17 <h2>Операции над DOM-деревом</h2>

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

19 Далее мы попробуем получить узелPиз нашего примера.

20 Есть четыре способа получить элемент:

21 <ul><li>Поиск по идентификатору:</li>

22 - </ul>Javascript

22 + </ul><ul><li>Поиск по названию HTML-тега:</li>

23 - <ul><li>Поиск по названию HTML-тега:</li>

23 + </ul><ul><li>Поиск по имени CSS-класса:</li>

24 - </ul>Javascript

24 + </ul><ul><li>Поиск с помощью CSS-селекторов:</li>

25 - <ul><li>Поиск по имени CSS-класса:</li>

25 + </ul>Корневым узлом документа будет узел с тегом html. После получения узла мы сможем воспользоватьсянавигационными свойствами, которые позволяют быстро переходить к соседним элементам. Эти свойства удобно показать так:

26 - </ul>Javascript

27 - <ul><li>Поиск с помощью CSS-селекторов:</li>

28 - </ul>Javascript

29 - Корневым узлом документа будет узел с тегом html. После получения узла мы сможем воспользоватьсянавигационными свойствами, которые позволяют быстро переходить к соседним элементам. Эти свойства удобно показать так:

30 Как следует из рисунка, мы можем работать с соседними узлами, обращаясь к свойствам с соответствующими именами. Например, чтобы получить набор дочерних элементов, можно использовать такой код:

26 Как следует из рисунка, мы можем работать с соседними узлами, обращаясь к свойствам с соответствующими именами. Например, чтобы получить набор дочерних элементов, можно использовать такой код:

31 - Javascript

32 Теперь рассмотрим добавление нового узла в дерево. Чтобы это сделать, нужно программно создать новый элемент и добавить его в набор дочерних элементов родительского узла. Рассмотрим добавление на примере элемента с тегом div:

27 Теперь рассмотрим добавление нового узла в дерево. Чтобы это сделать, нужно программно создать новый элемент и добавить его в набор дочерних элементов родительского узла. Рассмотрим добавление на примере элемента с тегом div:

33 - Javascript

34 Чтобы удалить элемент, можно вызвать метод remove() у найденного элемента:

28 Чтобы удалить элемент, можно вызвать метод remove() у найденного элемента:

35 - Javascript

36 Выше мы рассмотрели модификации состава узлов и навигацию между ними, но это еще не все. Еще мы можем модифицировать любой HTML-атрибут или значение выбранного узла, что организовывать интерактивные страницы.

29 Выше мы рассмотрели модификации состава узлов и навигацию между ними, но это еще не все. Еще мы можем модифицировать любой HTML-атрибут или значение выбранного узла, что организовывать интерактивные страницы.

37 Более детально эта тема разбирается в курсах, посвященных программированию на JavaScript. А сейчас посмотрим на небольшой пример, описывающий модификацию HTML-атрибута:

30 Более детально эта тема разбирается в курсах, посвященных программированию на JavaScript. А сейчас посмотрим на небольшой пример, описывающий модификацию HTML-атрибута:

38 - Javascript

39 <h2>Выводы</h2>

31 <h2>Выводы</h2>

40 В этом уроке мы изучили DOM-деревья - это особый вид деревьев, который стал стандартом взаимодействия с документами при работе с HTML, XML и другими языками разметки. Такие деревья легли в основу современного веб-серфинга и работы с другими документами - например, формата Word. С помощью этого подхода мы можем модифицировать веб-страницу на лету, не тратя время и силы на постоянную отправку запросов на сервер.

32 В этом уроке мы изучили DOM-деревья - это особый вид деревьев, который стал стандартом взаимодействия с документами при работе с HTML, XML и другими языками разметки. Такие деревья легли в основу современного веб-серфинга и работы с другими документами - например, формата Word. С помощью этого подхода мы можем модифицировать веб-страницу на лету, не тратя время и силы на постоянную отправку запросов на сервер.