Что такое 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-дерева в JavaScript

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

Заголовок документа

Узлы в дереве бывают различных типов, но в основном используются узлы, образованные на основе HTML элементов и текста. Всего типов узлов в DOM 12, но в настоящее время разработчикам сценариев JavaScript рекомендуют использовать только 7.

Типы узлов (NODE) документа

Например, откроем любую страницу в браузере и определим тип узла document :

Кроме определения типа узла ( nodeType ) с помощью JavaScript можно также узнать его имя и значение:

Дерево узлов документа

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

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

Инспектор DOM

В Mozilla Firefox существует расширение «DOM Inspector», с помощью которого Вы можете увидеть дерево документа.

Источник

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

Источник

Форум

Discord чат

Введение. 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».

Источник

Основы JavaScript: Изучаем работу с DOM! (Часть 1)

Дата публикации: 2019-03-22

От автора: объектная модель документа, или «DOM», определяет логическую структуру документов HTML и по существу выступает в качестве интерфейса для веб-страниц. Благодаря использованию языков программирования, таких как JavaScript, мы можем получить доступ к DOM, чтобы управлять веб-сайтами и делать их интерактивными.

В этой статье мы рассмотрим объект document, дерево DOM и узлы. Мы также узнаем все о том, как получить доступ к элементам и, в целом, как происходит работа с DOM JavaScript. Давайте начнем!

Что такое DOM?

По своей сути веб-сайт должен состоять из HTML-документа index.html. Используя браузер, мы просматриваем веб-сайт, который отображает HTML-файлы и любые CSS-файлы, которые добавляют правила стиля и макета.

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

Чтобы просмотреть DOM с помощью веб-браузера, кликните правой кнопкой мыши в любом месте страницы и выберите «Просмотреть код». Будут открыты Инструменты разработчика:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

DOM отображается на вкладке Элементы. Вы также можете просмотреть его, выбрав вкладку «Консоль» и введя «document».

Объект document

Объект document является встроенным объектом, содержащим множество свойств и методов. Мы обращаемся к этому объекту и манипулируем им с помощью JavaScript. А манипулируя DOM, мы можем сделать веб-страницы интерактивными! Поскольку мы больше не ограничены только созданием статических сайтов со стилизованным HTML-контентом.

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

Итак, давайте выполним нашу первую манипуляцию с DOM… Перейдите на сайт www.google.com и откройте Инструменты разработчика. Затем выберите вкладку Консоль и введите следующее:

Нажмите Enter, и вы увидите, что цвет фона теперь изменился на оранжевый. Конечно, вы не редактировали исходный код Google (!), но вы изменили способ отображения содержимого локально в вашем браузере, манипулируя объектом document.
document является объектом, свойство body которого мы выбрали для редактирования путем доступа к атрибуту style и изменения значения свойства backgroundColor на orange.

Обратите внимание, что в JavaScript мы используем способ написания имен backgroundColor, а не background-color, как в CSS. Любое свойство CSS через дефис будет записано в JavaScript в camelCase. Вы можете увидеть настройки DOM в разделе элемента body на вкладке Elements или набрав document.body в консоли.

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

Дерево DOM и узлы

Во многом из-за структуры DOM, его часто называют Дерево DOM.

Источник