Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Чтобы работать с JavaScript в браузерах, очень важно понимать, как они работают, хотя бы в общих чертах. Давайте возьмем для примера страницу и рассмотрим основные шаги, которые выполняет браузер для ее отображения:

2 В общих чертах процесс отображения страницы выглядит так:

3 <ol><li>Браузер узнает адрес страницы с помощью<a>DNS</a>, а затем делает запрос на сервер:

4 Сервер присылает в ответ HTML-код.

5 </li>

6 <li>Браузер получает HTML-код, анализирует его и формирует внутреннюю структуру, называемуюDOM-дерево.

7 </li>

8 <li>После этого браузер использует это дерево для физического рендеринга страницы, которую мы рассматриваем:

9 </li>

10 </ol>Что такое дерево DOM? Зачем оно нам нужно для создания страницы, если у нас есть HTML? Дело в том, что HTML - это просто текст. Использовать его напрямую крайне неудобно. Фактически, это невозможно.

11 Гораздо проще создать на его основе объект, который будет соответствовать структуре самого HTML, а затем использовать его для генерации страницы. Таким объектом и являетсяDOM-дерево.

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

13 Поэтому и получившийся объект имеет такую же, древовидную структуру:

14 Что-то подобное происходит с исходным кодом программ JavaScript. Для интерпретатора текст неудобен. Поэтому код внутри JavaScript сначала превращается в AST (Абстрактное Синтаксическое Дерево), которое уже затем используется для запуска.

15 Браузер формирует DOM-дерево где-то внутри себя, но при этом он предоставляет механизм для создания DOM-дерева прямо из JavaScript:

16 Полученный выше объект имеет структуру, которая будет одинаковой во всех браузерах и других программах, работающих с HTML. Именно поэтому он содержит приставку DOM.

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

18 Благодаря этому стандарту мы можем написать одну версию кода для всех браузеров. Иначе каждый браузер делал бы то, что ему хочется, и нам пришлось бы писать код для каждого браузера отдельно из-за их несовместимости.

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

20 В следующих уроках мы обсудим, как современные разработчики решают эти проблемы с помощью полифилов.

21 DOM-дерево текущей страницы доступно в JavaScript в виде объекта document, который наполнен множеством методов для работы с этим деревом в соответствии со спецификацией DOM.

22 Браузер сразу отображает любые изменения на странице:

23 <h2>Восстановление</h2>

24 Если передать браузеру ошибочный HTML с незакрытыми тегами, нарушенной вложенностью и другими проблемами, то никаких сообщений об ошибках не будет. Браузер примет этот HTML и отобразит что-то на экране.

25 Вам может не понравиться результат, но все сработает:

26 Браузер восстанавливает структуру документа согласно некоторым очень хитрым правилам. По-другому его теоретически невозможно было бы обработать. Но есть и другая причина: даже если сам HTML корректен, когда мы создаем дерево DOM, браузер добавляет некоторые узлы дерева, представленные тегами HTML.

27 Вы могли этого не заметить, но стандарт требует, чтобы они там были. Например, <tbody> добавляется в таблицы, и неважно, был он в исходном HTML или нет. Другой пример, в котором добавляется список, браузер автоматически создает корневой элемент <body>:

28 DOM открывает практически безграничные возможности для изменения страниц. Все библиотеки (jquery и другие) и фреймворки (angular, react) манипулируют DOM. Это основа, вокруг которой строится все во фронтенд-разработке.