что такое dom модель

В чём разница между узлом и элементом DOM?

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

При работе с DOM, кроме того, используется термин «элемент». Элементы очень похожи на узлы, но, всё же, это — не одно и то же. В чём же разница?

1. Узел DOM

Ключ к пониманию различия между узлом и элементом заключается в знании о том, что собой представляет узел.

Если рассматривать ситуацию в общих чертах, то оказывается, что DOM-документ включает в себя иерархию узлов. У каждого узла может быть родитель и (или) потомок.

Посмотрим на следующий HTML-документ:

В документ входит следующая иерархия узлов:

и абзац

Теги в HTML-документе представляют узлы. Интересно то, что обычный текст — это тоже узел. Узел-абзац

▍Типы узлов

Это свойство может иметь одно из следующих значений, представляющих тип узла:

Например, давайте выберем узел-абзац и посмотрим на его свойство nodeType :

В абзаце, кроме того, имеется текстовый узел:

Есть тип узла, который представляет всё дерево узлов документа. Это — Node.DOCUMENT_NODE :

2. Элемент DOM

После того, как мы разобрались с тем, что такое узел DOM, пришло время поговорить том, чем различаются узлы и элементы DOM.

— это всё элементы, так как они представлены тегами.

А вот сам документ, комментарий, текст — это не элементы, так как они не представлены соответствующими тегами:

Если говорить простыми словами, элемент — это подтип узла — так же как кошка — подтип животного.

3. Свойства DOM: узлы и элементы

Помимо различения узлов и элементов нужно ещё различать свойства DOM, которые содержат исключительно узлы или исключительно элементы.

Следующие свойства могут содержать либо узел ( Node ), либо коллекцию узлов ( NodeList ):

А вот следующие свойства могут содержать либо элементы ( HTMLElement ), либо коллекции элементов ( HTMLCollection ):

Рассмотрим следующий элемент-абзац, содержащий какой-то текст:

Откройте этот демонстрационный пример и посмотрите на свойства childNodes и children узла-абзаца:

Коллекция paragraph.childNodes содержит 2 узла: текст, оформленный полужирным шрифтом с помощью тега ( Thank you ), и текстовый узел ( for visiting my web page! ).

Но в коллекции paragraph.children имеется лишь 1 элемент, представленный тегом ( Thank you ).

Так как свойство paragraph.children содержит только элементы, текстовый узел в него не включён. Произошло это из-за того, что с точки зрения системы это — текст ( Node.TEXT_NODE ), а не элемент ( Node.ELEMENT_NODE ).

4. Итоги

Документ DOM — это иерархическая коллекция узлов. У каждого узла могут быть родители и (или) потомки.

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

У узлов имеется свойство, указывающее на их тип. Один из этих типов соответствует элементам DOM. Элементы представлены тегами в HTML-документе.

Сталкивались ли вы со сложностями, касающимися различения узлов и элементов DOM?

Источник

Работа с DOM-моделью

Каждый объект Window имеет свойство document, ссылающееся на объект Document. Этот объект Document не является автономным объектом. Он является центральным объектом обширного API, известного как объектная модель документа (DOM), который определяет порядок доступа к содержимому документа.

Обзор модели DOM

— это фундаментальный прикладной программный интерфейс, обеспечивающий возможность работы с содержимым HTML и XML-документов. Прикладной программный интерфейс (API) модели DOM не особенно сложен, но в нем существует множество архитектурных особенностей, которые вы должны знать.

Прежде всего, следует понимать, что вложенные элементы HTML или XML-документов представлены в виде дерева объектов DOM. Древовидное представление HTML-документа содержит узлы, представляющие элементы или теги, такие как и

, и узлы, представляющие строки текста. HTML-документ также может содержать узлы, представляющие HTML-комментарии. Рассмотрим следующий простой HTML-документ:

DOM-представление этого документа приводится на следующей диаграмме:

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

Тип Node и его подтипы образуют иерархию типов, изображенную на диаграмме ниже. Обратите внимание на формальные отличия между обобщенными типами Document и Element, и типами HTMLDocument и HTMLElement. Тип Document представляет HTML и XML-документ, а класс Element представляет элемент этого документа. Подклассы HTMLDocument и HTMLElement представляют конкретно HTML-документ и его элементы:

На этой диаграмме следует также отметить наличие большого количества подтипов класса HTMLElement, представляющих конкретные типы HTML-элементов. Каждый из них определяет JavaScript-свойства, отражающие HTML-атрибуты конкретного элемента или группы элементов. Некоторые из этих специфических классов определяют дополнительные свойства или методы, которые не являются отражением синтаксиса языка разметки HTML.

Выбор элементов документа

Работа большинства клиентских программ на языке JavaScript так или иначе связана с манипулированием элементами документа. В ходе выполнения эти программы могут использовать глобальную переменную document, ссылающуюся на объект Document. Однако, чтобы выполнить какие-либо манипуляции с элементами документа, программа должна каким-то образом получить, или выбрать, объекты Element, ссылающиеся на эти элементы документа. Модель DOM определяет несколько способов выборки элементов. Выбрать элемент или элементы документа можно:

по значению атрибута id;

по значению атрибута name;

по имени класса или классов CSS;

по совпадению с определенным селектором CSS.

Все эти приемы выборки элементов описываются в следующих подразделах.

Выбор элементов по значению атрибута id

Это самый простой и самый распространенный способ выборки элементов. Если сценарию необходимо иметь возможность манипулировать каким-то определенным множеством элементов документа, присвойте значения атрибутам id этих элементов и используйте возможность их поиска по этим значениям.

В версиях Internet Explorer ниже IE8 метод getElementById() выполняет поиск значений атрибутов id без учета регистра символов и, кроме того, возвращает элементы, в которых будет найдено совпадение со значением атрибута name.

Выбор элементов по значению атрибута name

Выбрать HTML-элементы, опираясь на значения их атрибутов name, можно с помощью метода getElementsByName() объекта Document:

Метод getElementsByName() определяется не классом Document, а классом HTMLDocument, поэтому он доступен только в HTML-документах и не доступен в XML-документах. Он возвращает объект NodeList, который ведет себя, как доступный только для чтения массив объектов Element.

В IE метод getElementsByName() возвращает также элементы, значения атрибутов id которых совпадает с указанным значением. Чтобы обеспечить совместимость с разными версиями браузеров, необходимо внимательно подходить к выбору значений атрибутов и не использовать одни и те же строки в качестве значений атрибутов name и id.

Выбор элементов по типу

Метод getElementsByTagName() объекта Document позволяет выбрать все HTML или XML-элементы указанного типа (или по имени тега). Например, получить подобный массиву объект, доступный только для чтения, содержащий объекты Element всех элементов в документе, можно следующим образом:

Подобно методу getElementsByName(), getElementsByTagName() возвращает объект NodeList. Элементы документа включаются в массив NodeList в том же порядке, в каком они следуют в документе, т.е. первый элемент

в документе можно выбрать так:

Можно получить NodeList, содержащий все элементы документа, если передать методу getElementsByTagName() шаблонный символ «*».

Кроме того, классом Element также определяет метод getElementsByTagName(). Он действует точно так же, как и версия метода в классе Document, но выбирает только элементы, являющиеся потомками для элемента, относительно которого вызывается метод. То есть отыскать все элементы внутри первого элемента

можно следующим образом:

Источник

Что такое объектная модель документа (DOM) и зачем она нужна

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

Допустим, вы изучили HTML, добавили первые теги, разобрались в CSS, создали красивые кнопки/формы/отзывчивые страницы и теперь с гордостью демонстрируете свои навыки окружающим.

Затем вы решаетесь углубить свои познания и задаетесь вопросом: « Смогу ли я добавить анимацию на странице? Хочу, чтобы при нажатии кнопки появлялись разные эффекты! ”

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

Что такое DOM?

Вспомните все шикарные примеры анимации, которые вам так бы хотелось повторить. Все они сделаны с помощью DOM.

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

Плюсы

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

Представление в браузере

Дерево представлений, которое создается браузером после чтения документа.

На картинке выше изображено дерево представлений и процесс его создания браузером. В данном примере есть четыре часто встречаемых элемента:

Манипуляции с DOM

Приступим к самому интересному – манипуляциям с DOM. Для начала создадим HTML элемент, рассмотрим его методы и принципы работы событий (events).

Проще простого, да? Теперь поговорим о методах DOM: как получить элементы и начать с ними работать.

Методы

getElementById()

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

myStart: имя переменной, идентичное передаваемому id.

start: передаваемое id. Если id c таким именем отсутствует, то возвращается null.

getElementsByClassName()

Данный метод возвращает HTMLCollection всех элементов с названием передаваемого класса.

myContainer: имя переменной, идентичное передаваемому классу.

.container: передаваемый класс. Если класс с таким именем отсутствует, то возвращается null.

getElementsByTagName()

Работает так же, как и методы выше. Он тоже возвращает HTMLCollection, но с одним важным отличием – возвращаются все элементы с названием передаваемого тега.

buttons: имя переменной, идентичное передаваемому имени тега.

button: имя тега, который хотим получить.

querySelector()

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

resetButton: имя переменной, идентично передаваемому селектору.

#reset: передаваемый селектор. Если совпадения по селекторам не обнаружены, то возвращается null.

querySelectorAll()

Очень похож на метод querySelector() с важным отличием – он возвращает все элементы, которые соответствуют передаваемому CSS- селектору. Селектор должен соблюдать синтаксис CSS. При отсутствии селектора возвращается null.

myButtons: имя переменной, идентичное передаваемому селектору.

#buttons: передаваемый селектор. При отсутствии совпадений возвращается null.

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

Настало время поговорить о событиях. В конце концом, именно они и создают анимацию.

События

Как уже говорилось выше, элементы в DOM содержат методы. А еще в них есть и события. И именно эти события отвечают за всякого рода интерактив на странице. Возможно, для вас это станет открытием, но события тоже являются методами.

click

Одно из самых популярных событий. Когда пользователь нажимает на определенный элемент, выполняется некое действие.

Параметры для addEventListener():

select

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

Это лишь самые популярные события. Конечно же, событий в DOM намного больше. Например, drag & drop – когда при перетаскивании элемента пользователем выполняется одно действие, а при «бросании» элемента – другое.

Теперь научимся делать обход DOM и пользоваться свойствами.

Обход DOM

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

.childNodes

Это свойство возвращает nodeList узлов-потомков (child nodes) определенного элемента. Может возвращаться текст, комментарии и т.д. Пользоваться им нужно с осторожностью.

.firstChild

Возвращает первого потомка определенного элемента.

.nodeName

Возвращает имя определенного элемента. В данном случае мы передавали div, поэтому вернулось тоже “div”.

.nodeValue

Это свойство используется для текста и комментариев. Оно возвращает или устанавливает значение текущего узла. В данном случае при передаче div возвращается null.

.nodeType

Это свойство возвращает тип определенного элемента. В данном случае – это «1».

В таблице показаны все типы nodeTypes и nodeName и их возвращаемые значения nodeValue.

Элементы

Данные свойства (не путать с элементами выше!) возвращают только элементы. Часто используются и рекомендуют, т.к. не создают лишней путаницы и более просты для понимания.

.parentNode

Это свойство возвращает предка передаваемого узла.

.firstElementChild

Возвращает первый элемент-потомок определенного элемента.

.lastElementChild

Возвращает последний элемент-потомок определенного элемента.

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

Заключение

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

Источник

Немного о том, как работает виртуальный DOM в React

Настоящий или реальный (real) DOM

DOM расшифровывается как Document Object Model (объектная модель документа). Проще говоря, DOM — это представление пользовательского интерфейса (user interface, UI) в приложении. При каждом изменении UI, DOM также обновляется для отображения этих изменений. Частые манипуляции с DOM негативно влияют на производительность.

Что делает манипуляции с DOM медленными?

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

Манипуляции с DOM являются сердцем современного интерактивного веба. К сожалению, они намного медленнее большинства JavaScript-операций. Ситуация усугубляется тем, что многие JavaScript-фреймворки обновляют DOM чаще, чем необходимо.

Допустим, у нас имеется список из 10 элементов. Мы изменяем первый элемент. Большинство фреймворков перестроят весь список. Это в 10 раз больше работы, чем требуется! Только 1 элемент изменился, остальные 9 остались прежними.

Перестроение списка — это легкая задача для браузера, но современные веб-сайты могут осуществлять огромное количество манипуляций с DOM. Поэтому неэффективное обновление часто становится серьезной проблемой. Для решения данной проблемы команда React популяризовала нечто под названием виртуальный (virtual) DOM (VDOM).

Виртуальный DOM

В React для каждого объекта настоящего DOM (далее — RDOM) существует соответствующий объект VDOM. VDOM — это объектное представление RDOM, его легковесная копия. VDOM содержит те же свойства, что и RDOM, но не может напрямую влиять на то, что отображается на экране.

Виртуальный DOM (VDOM) — это концепция программирования, где идеальное или «виртуальное» представление UI хранится в памяти и синхронизируется с «реальным» DOM, используемая такими библиотеками, как ReactDOM. Данный процесс называется согласованием (reconcilation).

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

Почему VDOM является более быстрым?

Когда в UI добавляются новые элементы, создается VDOM в виде дерева. Каждый элемент является узлом этого дерева. При изменении состояния любого элемента, создается новое дерево. Затем это новое дерево сравнивается (diffed) со старым.

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

На изображениях ниже представлено виртуальное DOM-дерево и процесс согласования.

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

Как React использует VDOM?

После того, как мы рассмотрели, что такое VDOM, настало время поговорить о том, как он используется в React.

1. React использует паттерн проектирования «Наблюдатель» (observer) и реагирует на изменения состояния

В React каждая часть UI является компонентом и почти каждый компонент имеет состояние (state). При изменении состояния компонента, React обновляет VDOM. После обновления VDOM, React сравнивает его текущую версию с предыдущей. Этот процесс называется «поиском различий» (diffing).

После обнаружения объектов, изменившихся в VDOM, React обновляет соответствующие объекты в RDOM. Это существенно повышает производительность по сравнению с прямыми манипуляциями DOM. Именно это делает React высокопроизводительной библиотекой JavaScript.

2. React использует механизм пакетного (batch) обновления RDOM

Это также положительно влияет на производительность. Названный механизм предполагает отправку обновлений в виде пакетов (набора, серии) вместо отправки отдельного обновления при каждом изменении состояния.

Повторная отрисовка UI — самая затратная часть, React обеспечивает точечную и групповую перерисовку RDOM.

3. React использует эффективный алгоритм поиска различий

React использует эвристический O(n) (линейный) алгоритм, основываясь на двух предположениях:

Два элемента разных типов приводят к построению разных деревьев

Разработчик может обеспечить стабильность элементов между рендерингами посредством пропа key (ключ)

На практике эти предположения являются верными почти во всех случаях.

При сравнении двух деревьев, React начинает с корневых элементов. Дальнейшие операции зависят от типов этих элементов.

Элементы разных типов

Если корневые элементы имеют разные типы, React уничтожает старое дерево и строит новое с нуля

Любые компоненты, являющиеся дочерними по отношению к корневому, размонтируются, их состояние уничтожается. Например, при сравнении:

Старый Counter будет уничтожен и создан заново.

Элементы одинакового типа

При сравнении двух элементов одинакового типа, React «смотрит» на атрибуты этих элементов. Узлы DOM сохраняются, изменяются только их атрибуты. Например:

После обработки узла DOM, React рекурсивно перебирает всех его потомков.

Рекурсивный перебор дочерних элементов

По умолчанию React перебирает два списка дочерних элементов DOM-узла и генерирует мутацию при обнаружении различий.

Например, при добавлении элемента в конец списка дочерних элементов, преобразование одного дерева в другое работает хорошо:

Обычно, вставка элемента в начало списка плохо влияет на производительность. Например, преобразование одного дерева в другое в данном случае будет работать плохо:

Использование ключей

Теперь React знает, что элемент с ключом 0 является новым, а элементы с ключами 1 и 2 старыми.

На практике в качестве ключей, как правило, используются идентификаторы:

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

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

Изменение порядка элементов при использовании индексов в качестве ключей также может привести к проблемам с состоянием элементов. Экземпляры компонента обновляются и повторно используются на основе ключей. Если ключом является индекс, перемещение элемента приведет к изменению ключа. Как результат, состояние компонента для таких вещей, как неуправляемое поле для ввода данных, может смешаться и обновиться неожиданным образом.

Простыми словами: «Вы говорите React, в каком состоянии должен находиться UI, и он обеспечивает соответствие DOM этому состоянию. Преимущество такого подхода состоит в том, что вам, как разработчику, не нужно знать, как именно происходит изменение атрибутов, обработка событий и обновление DOM».

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

Поскольку «виртуальный DOM» — это в большей степени паттерн, нежели конкретная технология, данное понятие может означать разные вещи. В мире React «виртуальный DOM», обычно, ассоциируется с React-элементами, которые являются объектами, представляющими пользовательский интерфейс. Тем не менее, React также использует внутренние объекты, которые называются «волокнами» (fibers). В этих объектах хранится дополнительная информация о дереве компонентов. Fiber — это новый движок согласования, появившийся в React 16. Его основная цель заключается в обеспечении инкрементального рендеринга VDOM.

Как выглядит VDOM?

Название «виртуальный DOM» делает концепцию немного магической (мистической). На самом деле, VDOM — это обычный JavaScript-объект.

Представим, что у нас имеется такое DOM-дерево:

Это дерево может быть представлено в виде такого объекта:

Это наш VDOM. Как и RDOM, он является объектным представлением HTML-документа (разметки). Однако, поскольку он представляет собой всего лишь объект, мы можем свободно и часто им манипулировать, не прикасаясь к RDOM без крайней необходимости.

VDOM под капотом

Теперь давайте поговорим о том, как VDOM решает проблему производительности и повторного использования.

Как мы выяснили ранее, VDOM может использоваться для обнаружения конкретных изменений, которые необходимо произвести в DOM. Вернемся к примеру с неупорядоченным списком и внесем в него те же изменения, которые мы делали с помощью DOM API.

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

Данная копия используется для создания «различия» (diff) между оригинальным VDOM ( list ) и его обновленной версией. Diff может выглядеть следующим образом:

Данный diff содержит инструкции по обновлению RDOM. После определения всех различий мы можем отправить их в DOM для выполнения необходимых обновлений.

Например, мы можем перебрать все различия и либо добавить нового потомка, либо обновить существующего в зависимости от различия:

Обратите внимание, что это очень упрощенная версия того, как может работать VDOM.

VDOM и фреймворки

Обычно, мы имеем дело с VDOM при использовании фреймворков.

Копцепция VDOM используется такими фреймворками, как React и Vue для повышения производительности обновления DOM. Например, с помощью React наш компонент list может быть реализован следующим образом:

Для обновления списка достаточно создать новый шаблон и снова передать его ReactDOM.render() :

Поскольку React использует VDOM, даже несмотря на то, что мы повторно рендерим весь список, обновляются только фактически изменившиеся части.

Заключение

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

Облачные VDS от Маклауд быстрые и безопасные.

Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!

Источник