Когда мы запрашиваем страницу, вводя ее URL-адрес в адресной строке браузера, браузер подготавливает запрос и вызывает сервер для получения необходимых данных. Затем сервер отправляет данные, необходимые для загрузки страницы (обычно HTML, CSS и JS).
Теперь у браузера есть все необходимое, и он начинает создавать пользовательский интерфейс. Он проверяет тег ‹Head› и использует эти метаданные для прикрепления к странице. Затем он достигает тега ‹body›. Здесь он начинает читать HTML по одному элементу за раз и начинает строить DOM на его основе. Каждый элемент HTML реплицируется в DOM отдельным узлом. Таким образом, он создает DOM. Можно сказать, что хотя HTML и DOM — две совершенно разные вещи, но, по крайней мере, изначально DOM построен из HTML. Затем позже JS меняет его.
Что такое JS-движок?
Пока браузер все еще находится на этапе построения страницы, где он читает HTML и создает DOM, он может столкнуться со специальным тегом ‹Script›. Когда это происходит, он прекращает построение DOM и начинает выполнение JS, написанного внутри тегов ‹Script›.
Для понимания и выполнения JS в каждом браузере есть специальный инструмент под названием JS engine. Например, Google Chrome имеет движок V8 JS. Теперь архитектура движка JS — это гораздо более широкая тема для освещения. Мы напишем его как-нибудь позже. Но пока давайте разберемся, как движок JS может изменить наш пользовательский интерфейс, то есть DOM.
Как JS меняет наш DOM?
Каждый браузер предоставляет API для движка JS, с помощью которого он может изменять DOM. Этот API не что иное, как объект document. Браузеры предоставляют этот (документ) и множество других API через вызов глобального объекта window. Вот почему мы можем использовать window.document.getElementByID.
Используя этот API, код JS может изменить нашу DOM в любой степени. Он также может удалить любой узел или добавить новый узел в DOM. Хотя есть несколько вещей, которые он не может сделать, например, изменить или удалить узел DOM, который еще не создан. По этой причине люди обычно добавляют все свои теги сценариев в конце HTML в теге body.
Спасибо за чтение.
Это было мое понимание очень простым языком темы из книги под названием Secrets of Javascript Ninja.
