что такое dom простыми словами

Введение

Что такое Объектная Модель Документа (DOM)?

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

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

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

Например: стандарт DOM описывает, что метод getElementsByTagName в коде, указанном ниже, должен возвращать список всех элементов

DOM и JavaScript

Вначале JavaScript и DOM были тесно связаны, но впоследствии они развились в различные сущности. Содержимое страницы хранится в DOM и может быть доступно и изменяться с использованием JavaScript, поэтому мы можем записать это в виде приблизительного равенства:

API (веб либо XML страница) = DOM + JS (язык описания скриптов)

DOM спроектирован таким образом, чтобы быть независимым от любого конкретного языка программирования, обеспечивая структурное представление документа согласно единому и последовательному API. Хотя мы всецело сфокусированы на JavaScript в этой справочной документации, реализация DOM может быть построена для любого языка, как в следующем примере на Python:

Для подробной информации о том, какие технологии участвуют в написании JavaScript для веб, смотрите обзорную статью JavaScript technologies overview.

Каким образом доступен DOM?

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

При создании сценария с использованием элемента

Источник

Форум

Справочник

Введение. DOM в примерах.

Простейший DOM

Построим, для начала, дерево DOM для следующего документа.

Пример посложнее

Рассмотрим теперь более жизненную страничку:

А вот так выглядит дерево, если изобразить его прямо на HTML-страничке:

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

. DOM, не содержащий таких «пустых» узлов, называют «нормализованным».

Пример с атрибутами и DOCTYPE

Рассмотрим чуть более сложный документ.

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

Вообще-то это секрет, но DOCTYPE тоже является DOM-узлом, и находится в дереве DOM слева от HTML (на рисунке этот факт скрыт).

Нормализация в различных браузерах

При разборе HTML Internet Explorer сразу создает нормализованный DOM, в котором не создаются узлы из пустого текста.

На рисунке для краткости текстовые узлы обозначены просто решеткой. У body вместо 3 появилось 7 детей.

Opera тоже имеет чем похвастаться. Она может добавить лишний пустой элемент «просто от себя».

У меня получается 3 для IE, 7 для Firefox и 8 (!?) для Opera.

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

Возможности, которые дает DOM

Зачем, кроме красивых рисунков, нужна иерархическая модель DOM?

Каждый DOM-элемент является объектом и предоставляет свойства для манипуляции своим содержимым, для доступа к родителям и потомкам.

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

Разберем подробнее способы доступа и свойства элементов DOM.

Доступ к элементам

Начнем с вершины дерева.

document.documentElement

document.body

Типы DOM-элементов

У каждого элемента в DOM-модели есть тип. Его номер хранится в атрибуте elem.nodeType

Всего в DOM различают 12 типов элементов.

Остальные типы в javascript программировании не используются.

Пример

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

Дочерние элементы

Этих свойств вполне хватает для удобного обращения к соседям.

Свойства элементов

Рассмотрим здесь еще некоторые (не все) свойства элементов, полезные при работе с DOM.

tagName

Атрибут есть у элементов-тегов и содержит имя тега в верхнем регистре, только для чтения.

style

Это свойство управляет стилем. Оно аналогично установке стиля в CSS.

Например, можно установить element.style.width :

Исходный код этой кнопки:

Например, для установки свойства z-index в 1000, нужно поставить:

innerHTML

Когда-то это свойство поддерживалось только в IE. Теперь его поддерживают все современные браузеры.

Оно содержит весь HTML-код внутри узла, и его можно менять.

Свойство innerHTML применяется, в основном, для динамического изменения содержания страницы, например:

className

Это свойство задает класс элемента. Оно полностью аналогично html-атрибуту «class».

Источник

Что такое объектная модель документа (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 и чем не является?

Что такое DOM, и где ее искать? Разбираемся, как выглядит объектная модель документа, для чего нужна и чем отличается от простого HTML-кода.

Объектная модель документа, aka DOM, – это интерфейс, с помощью которого программы могут работать с контентом, структурой и стилями веб-страницы. Проще говоря – это набор методов, которые можно вызвать, и свойств, к которым можно обратиться.

Чтобы лучше разобраться, что такое объектная модель документа, давайте посмотрим, как она создается.

Создание веб-страницы

Путь от исходного HTML в вашем файле до отображения в браузере оформленной страницы, с которой можно взаимодействовать, называется критическим путем отрисовки (critical rendering path). Его можно разбить на два больших этапа:

Дерево рендера, или дерево визуализации, – это специальная структура, состоящая из HTML-элементов, которые будут отображены на странице, и связанных с ними стилей. Это дерево собирается из двух компонентов:

Таким образом, формирование DOM предшествует формированию готовой страницы.

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

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

Для примера возьмем простой документ:

Он может быть представлен в виде дерева узлов:

Чем DOM не является?

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

DOM – это не HTML-код

Безусловно, DOM создается из исходного HTML-кода. Но объектная модель не всегда полностью соответствует своему прообразу. Почему так происходит?

Невалидный HTML

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

Например, такой невалидный HTML-код:

превратится в такую валидную объектную модель:

Браузер самостоятельно добавил теги head и body, которые требуются по спецификации.

Модификация с помощью JavaScript

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

Например, с помощью JavaScript можно создать дополнительные элементы:

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

Страница может заполняться контентом, полученным асинхронно с сервера с помощью AJAX-запросов. Эта операция также не затрагивает исходный код, но изменяет объектную модель.

DOM – это не код страницы

Аналогично, то, что вы видите, нажав Просмотреть код страницы (горячая комбинация Ctrl+U ), также не является объектной моделью документа, ведь по сути это и есть исходный HTML-код.

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

DOM – это не дерево рендера

Дерево рендера – это то, что вы видите, открыв страницу в браузере. Вы помните, что оно образуется из комбинации DOM и CSSOM.

Дерево рендера состоит только из видимых на экране элементов, и это его ключевое отличие от DOM. Например, вы не найдете здесь элементов, для которых установлено CSS-правило display: none. Они не видны, не занимают места на странице и не участвуют в рендере.

Видите скрытый с помощью инлайнового стиля параграф?

Вы можете найти его в DOM:

но не в дереве рендера:

DOM – это не содержимое DevTools

Тут разница не такая очевидная, как в случае дерева рендеринга. Панель разработчика имеет максимально близкую к DOM реализацию, но все же они не идентичны. В DevTools можно найти информацию, которой нет в DOM.

Так что в инструментах разработчика псевдоэлементы есть:

а в DOM – нет. Именно поэтому с ними нельзя взаимодействовать из JavaScript, ведь они не являются частью объектной модели документа.

Что же такое объектная модель документа?

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

Основные характеристики объектной модели:

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

Например, повесим обработчик события mouseenter на элемент заголовка:

Элемент заголовка здесь – это узел DOM-дерева, к которому мы смогли обратиться с помощью DOM-метода addEventListener. Когда событие наведения мыши произойдет, DOM-элемент распространит его выше по дереву DOM и сообщит нам об этом.

DOM – понятие, специфичное для браузерной среды выполнения кода. Это не JavaScript, а лишь API, которым JavaScript может пользоваться.

Источник

В чём разница между узлом и элементом 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?

Источник