Объектная модель документа (DOM), что по сути является жаргоном веб-разработчиков, означающим «как веб-страницы работают за кулисами», — это то, что должен иметь каждый веб-разработчик их инструментарий. Это своего рода секретный соус, лежащий в основе современной веб-разработки.

Но почему ДОМ? Недавно я наткнулся на видео о том, как работают браузеры, а затем подробно остановился на некоторых статьях, и это мое понимание «почему?»

Каждый браузер работает с ** браузерным движком**. Это основной компонент веб-браузера, отвечающий за преобразование веб-содержимого, включая HTML, CSS и JavaScript, в визуальное представление, с которым могут взаимодействовать пользователи.

«Документ»: этот термин относится к веб-странице, загруженной в веб-браузер. Он представляет собой структурированную иерархию содержимого веб-страницы, включая такие элементы, как заголовки, абзацы, изображения, ссылки, формы и многое другое. Документ DOM — это, по сути, представление структуры веб-страницы в памяти, создаваемое механизмом рендеринга браузера при загрузке страницы.

Теперь начинается интересная часть того, как движок браузера преобразует документ в дерево узлов, которое мы знаем как DOM для рисования.

Ну, после загрузки документа он преобразуется в необработанные данные, да, 0 и 1. И эти необработанные байты данных преобразуются в символы. Это преобразование выполняется на основе кодировки символов HTML-файла.

Эти символы далее анализируются на так называемые токены. Как и любой другой токен языка программирования, его можно определить как наименьший отдельный элемент этого языка программирования, который имеет смысл. Здесь токен относится к тегам в HTML, а именно body, h1, h2, p, диапазон и т. д.

После завершения токенизации следующим шагом будет структурирование этих токенов. Здесь в игру вступают объекты.Из этих токенов создается объект, этот объект содержит много информации о каждом объекте, включая начало тега, конец тега, атрибуты, данные/значение и многое другое.

Теперь у нас есть «Документ» и «Объекты», но они все еще неструктурированы, поскольку между этими объектами нет связи. После токенизации эти токены преобразуются в узлы. Каждый узел будет иметь связь с другим, включая родительские, дочерние и родственные узлы. Эти отношения между узлами образуют знакомую древовидную структуру. Этот процесс известен как моделирование дерева объектов. Теперь модель дерева узлов готова из HTML-документа и готова к рисованию.

Напомню, что название «Объектная модель документа» отражает ее назначение и функцию. Он служит структурированной моделью содержимого веб-страницы, представленной в виде набора объектов. Название «DOM» возникло в результате слияния слов «Документ» (веб-страница), «Объект» (представляющий элементы) и «Модель» (структурированное представление).

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