DOM означает объектную модель документа. Согласно Википедии:
«Объектная модель документа — это кроссплатформенное и независимое от языка приложение…..»
Хватит любительских разговоров. Давайте посмотрим, что вы хотите сохранить об этом таинственном DOM.
Всякий раз, когда мы делаем веб-сайт, мы используем HTML, CSS и любой другой фреймворк в зависимости от вашего выбора. Предположим, мы хотим создать статический веб-сайт. Обычно мы используем HTML5 и CSS3 (текущие последние версии HTML и CSS).
Рассмотрим очень простой HTML-код:
<html>
<head>
<title>DOM</title>
</head>
<body>
<h1>Browser</h1>
</body>
</html>
Этот фрагмент кода имеет для нас смысл. Но как браузер интерпретирует этот код? Хотя это очень хорошо структурированный код, должна быть логика, которую браузеры должны использовать для интерпретации этого кода.
Как браузер читает этот код?
[Разговор между Джоном Доу, Браузером и его другом Парсером.]
Джон Доу:Эй, браузер, я даю тебе HTML-код, отобрази его.
Браузер: хорошо, я могу это сделать, но у меня есть некоторые ограничения.
Джон Доу:Что вам нужно, чтобы преодолеть эти ограничения?
Браузер: на самом деле я не могу понять код. Мне нужно преобразовать его в новый формат. Мой друг Parser умеет это делать.
Джон Доу: Хорошо, продолжайте.
Браузер: мое ограничение заключается в том, что на моем базовом уровне я могу читать только один символ за раз (хотя я создаю иллюзию, я могу прочитать все предложение за раз). Поэтому, когда вы даете мне такой код, мне очень неэффективно обрабатывать код посимвольно. Хотя я могу это сделать, это займет у меня много времени, а для большого кода я могу потерпеть неудачу.
Джон Доу: Так чем же вам может помочь синтаксический анализатор?
Браузер:Парсер — волшебная личность. Он может преобразовать код в читаемый формат (даже визуализированный вами).
[Парсер присоединяется]
Парсер:Здравствуйте, Джон! Я всего лишь посредник в преобразовании вашего кода в веб-страницу. Я буду делать тяжелую работу для браузера. Я буду читать код символ за символом и преобразовывать его в древовидную структуру, подобную этой:
Джон Доу: Как вы можете это сделать? [поражен]
Парсер: у меня есть несколько правил, которым я следую:
- Все символы, заключенные в ‹ ›, называются тегами.
- Если тег имеет форму ‹/ ›, то он называется закрывающим тегом, в противном случае — открывающим тегом.
- Любой код между открывающим и закрывающим тегом считается дочерним элементом этого тега.
- Дети могут сами состоять из открывающего и закрывающего тега, который преобразуется в узел дерева.
- Когда такие теги не появляются в дочерних элементах, он становится конечным узлом.
Джон Доу:Как это поможет вам в браузере?
Браузер: я могу легко сохранить его в памяти. Я могу получить доступ к каждому узлу за очень короткое время (порядка журнала (n), n - количество узлов). У меня самого есть набор правил для интерпретации узлов и их отображения (или рендеринга) на веб-странице. Эти правила слишком сложны, чтобы вы могли их знать.
Джон Доу: Это была только HTML-часть. Что, если я использую такие атрибуты и стили CSS —
<h1 class="heading" style="color:#FFF;">DOM</h1>
Браузер: не беспокойтесь, Джон, древовидную структуру, которую дает мне синтаксический анализатор, очень легко модифицировать. Я могу прикрепить стили и атрибуты к каждому узлу. Я могу очень легко (за гораздо меньшее время) прикрепить к узлу столько свойств, сколько захочу. Стили и атрибуты, являющиеся его частью.
Древовидная структура, которую дает мне синтаксический анализатор, известна как DOM. Внутри каждого тега (открывающего и закрывающего) любой код составляет элемент DOM. В приведенном выше примере каждый узел, кроме конечных узлов, является элементом DOM. Код документа обрабатывается и преобразуется в древовидную модель. Эта модель рассматривает узлы дерева как объекты, и браузер может очень легко читать/изменять их. DOM позволяет нам хранить код в формате, который браузеру легче обрабатывать.
Особенность DOM заключается в том, что он хранит иерархический код в древовидной структуре данных. Таким образом, каждый узел может быть нацелен (узел может быть выбран) и обработан дальше.
Эта древовидная структура очень важна, потому что фреймворк и библиотеки могут очень легко ориентироваться на эти узлы дерева DOM и получать к ним доступ и манипулировать ими. следовательно, известный как манипуляция DOM. Популярные библиотеки, такие как Jquery, широко используют манипулирование DOM.
