Понимание объектной модели документа (DOM) в деталях

Мы все слышали о DOM, или объектной модели документа, которая время от времени упоминается о JavaScript. DOM является довольно важной концепцией в веб-разработке. Без этого мы не смогли бы динамически изменять HTML-страницы в браузере.

Изучение и понимание DOM приводит к лучшим способам доступа, изменения и мониторинга различных элементов HTML-страницы. Объектная модель документа также может помочь нам сократить ненужное увеличение времени выполнения скрипта.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Деревья структуры данных
Прежде чем говорить о том, что такое DOM, как он возникает, как он существует и что происходит внутри него, я хочу, чтобы вы узнали о деревьях. Не хвойный и лиственный, а о дереве структуры данных.

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

Конечно, это еще не все, что касается структуры данных, но именно здесь все и начинается. Эта «договоренность» лежит в основе всего этого. Это очень важно и в DOM. Но мы пока не говорим о DOM, поэтому позвольте мне привести вас к структуре данных, с которой вы, возможно, знакомы: массивам.
Массивы и деревья
Массивы имеют индексы и длину, они могут быть многомерными и иметь гораздо больше характеристик. Как бы важно ни знать эти вещи о массивах, давайте не будем сейчас этим заниматься. Для нас массив довольно прост. Это когда вы устраиваете разные вещи в ряд.
Иллюстрация простого массиваТочно так же, думая о деревьях, допустим, речь идет о том, чтобы ставить вещи друг над другом, начиная только с одной вещи сверху.
Иллюстрация древовидной структурыТеперь вы можете взять однострочных уток из прошлого, повернуть их вертикально и сказать мне, что «теперь каждая утка находится под другой уткой». Это дерево тогда? Это.

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

В любом случае, самый верхний элемент в древовидной структуре данных делает что-то очень важное. Он предоставляет место для начала поиска любой информации, которую мы хотим извлечь из дерева.
Поиск в древовидной структуре данныхЗначение DOM
DOM расшифровывается как объектная модель документа. Документ указывает на документ HTML (XML), который представлен в виде объекта. (В JavaScript все может быть представлено только как объект!)

Модель создается браузером, который принимает документ HTML и создает объект, который его представляет. Мы можем получить доступ к этому объекту с помощью JavaScript. И поскольку мы используем этот объект для манипулирования HTML-документом и создания собственных приложений, DOM – это, по сути, API.
Дерево DOM
В коде JavaScript документ HTML представлен как объект. Все данные, прочитанные из этого документа, также сохраняются как объекты, вложенные друг в друга (потому что, как я уже говорил, в JavaScript все может быть представлено только как объекты).

Итак, это в основном физическое расположение данных DOM в коде: все организовано как объекты. Логично, однако, что это дерево.
DOM Parser
Каждое браузерное программное обеспечение имеет программу под названием DOM Parser, которая отвечает за анализ HTML-документа в DOM.

Браузеры читают HTML-страницу и превращают ее данные в объекты, составляющие DOM. Информация, представленная в этих JavaScript-объектах DOM, логически организована как дерево структуры данных, известное как дерево DOM.
DOM ParserРазбор данных из HTML в дерево DOM
Возьмите простой HTML-файл. Имеет корневой элемент, Его подэлементами являются а такжеу каждого есть много собственных дочерних элементов.

По сути, браузер читает данные в HTML-документе, что-то похожее на это:





И упорядочивает их в дерево DOM следующим образом:
Дерево DOMПредставление каждого элемента HTML (и принадлежащего ему содержимого) в дереве DOM называется Узел, Корневой узел является узлом,

Интерфейс DOM в JavaScript называется документом (поскольку он представляет собой HTML-документ). Таким образом, мы получаем доступ к дереву DOM HTML-документа через документ интерфейс в JavaScript.

Мы можем не только получить доступ, но и манипулировать HTML-документом через DOM. Мы можем добавлять элементы на веб-страницу, удалять и обновлять их. Каждый раз, когда мы меняем или обновляем какие-либо узлы в дереве DOM, это отражается на веб-странице.
Как устроены узлы
Я уже упоминал, что каждый фрагмент данных из документа HTML сохраняется как объект в JavaScript. Итак, как данные, сохраненные в виде объекта, могут быть логически упорядочены в виде дерева?

Узлы дерева DOM имеют определенные характеристики или свойства. Почти у каждого узла в дереве есть родительский узел (узел прямо над ним), дочерние узлы (узлы под ним) и родные узлы (другие узлы, принадлежащие тому же родителю). Имея это семья выше, ниже и вокруг узла – это то, что определяет его как часть дерева.

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

Скажем, вы хотите обновить цвет

<

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

Но что, если вы хотите удалить узел из дерева или добавить его к нему? Возможно, придется переставить все дерево, удалив узел или добавив его в дерево. Это дорогостоящая работа. Требуется время и ресурсы браузера, чтобы выполнить эту работу.

Например, допустим, вы хотите добавить пять дополнительных строк в таблицу. Для каждой строки, когда ее новые узлы создаются и добавляются в DOM, дерево обновляется каждый раз, добавляя в общей сложности до пяти обновлений.

Мы можем избежать этого, используя DocumentFragment интерфейс. Думайте об этом как о коробке, которая может содержать все пять рядов и быть добавленной к дереву. Таким образом, пять строк добавляются как один отдельный фрагмент данных, а не одна за другой, что приводит только к одному обновлению в дереве.

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

Аналогичным образом, когда затрагивается макет веб-страницы в целом, часть или вся веб-страница может быть перерисована. Этот процесс известен как оплавления, Чтобы избежать чрезмерного перекомпоновки, убедитесь, что вы не слишком меняете DOM. Изменения в DOM – не единственное, что может вызвать Reflow на веб-странице. В зависимости от браузера, другие факторы также могут этому способствовать.
Завершение
Подводя итог, DOM визуализируется как дерево, состоящее из всех элементов, найденных в документе HTML. Физически (настолько физически, насколько это возможно для всего цифрового), это набор вложенных объектов JavaScript, свойства и методы которых содержат информацию, позволяющую логически упорядочить их в дерево.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *