Дерево DOM | Конспект JS-course
Источник: http://learn.javascript.ru/dom-nodes
Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) — объектная модель, используемая для XML/HTML-документов.
Согласно DOM-модели, документ является иерархией, деревом.
Каждый HTML-тег образует узел дерева с типом «элемент». Вложенные в него теги становятся дочерними узлами. Для представления текста создаются узлы с типом «текст».
Проще говоря, DOM — это представление документа в виде дерева тегов, доступное для изменения через JavaScript.
Пример DOM
Построим, для начала, дерево DOM для следующего документа.
<html>
<head>
<title>О лосях</title>
</head>
<body>
Правда о лосях
</body>
</html>
В этом дереве выделено два типа узлов.
- Теги образуют узлы-элементы (element node) DOM-дерева.
Естественным образом одни узлы вложены в другие. - Текст внутри элементов образует текстовые узлы. Текстовый узел содержит исключительно строку текста и не может иметь потомков.
Естественным образом одни узлы вложены в другие.Ещё узлы
Дополним страницу новыми тегами и комментарием:
<!DOCTYPE HTML>
<html>
<head>
<title>О лосях</title>
</head>
<body>
Правда о лосях
<ol>
<li>Лось — животное хитрое</li>
<!-- комментарий -->
<li>..и коварное!</li>
</ol>
</body>
</html>
В этом примере тегов уже больше, и даже появился узел нового типа — узел-комментарий. Казалось бы, зачем комментарий в DOM? На отображение-то он всё равно не влияет. Но так как он есть в HTML — обязан присутствовать в DOM-дереве.
Всё, что есть в HTML, находится и в DOM.
Поскольку DOM-модель в точности соответствует документу, пробельные символы так же важны, как и любой другой текст.
На картинке выше текстовые узлы, содержащие пробелы, выделены серым. Единственное исключение — пробелы перед и между HEAD/BODY
на самом верхнем уровне документа. В DOM их никогда нет, согласно требованиям стандарта. Все остальные пробелы сохраняются в точности.
Пробелы есть в DOM, только если они есть в документе.
Если не будет пробелов между тегами — не будет и пробельных узлов.
Следующий документ вообще не содержит пробельных узлов:
<!DOCTYPE HTML><html><head><title>Title</title></head><body></body></html>
В IE до версии 9 пробельных узлов нет. DOCTYPE — тоже узел.
Возможности, которые дает DOM
DOM нужен для того, чтобы манипулировать страницей — читать информацию из HTML, создавать и изменять элементы. Фактически, DOM предоставляет возможность делать со страницей всё, что угодно.
Итого
- DOM-модель — это внутреннее представление HTML-страницы в виде дерева.
- Все элементы страницы, включая теги, текст, комментарии, являются узлами DOM.
- У элементов DOM есть свойства и методы, которые позволяют изменять их.
- Кстати, DOM-модель используется не только в JavaScript, это известный способ представления XML-документов.
Объектная модель документа (DOM)
Что такое Объектная Модель Документа (DOM)?
Объектная Модель Документа (DOM) – это программный интерфейс (API) для HTML и XML документов. DOM предоставляет структурированное представление документа и определяет то, как эта структура может быть доступна из программ, которые могут изменять содержимое, стиль и структуру документа. Представление DOM состоит из структурированной группы узлов и объектов, которые имееют свойства и методы. По существу DOM соединяет веб-страницу с языками описания сценариев либо языками программирования.
Веб-страница – это документ. Документ может быть представлен как в окне браузера, так и в самом HTML-коде. В любом случае, это один и тот же документ.
DOM предоставляет другой способ представления, хранения и управления этого документа. DOM полностью поддерживает объектно-ориентированнное представление веб-страницы, делая возможным её изменение при помощи языка описания сценариев наподобие JavaScript.
Стандарты W3C DOM и WHATWG DOM формируют основы DOM, реализованные в большинстве современных браузеров. Многие браузеры предлагают расширения за пределами данного стандарта, поэтому необходимо проверять работоспособность тех или иных возможностей DOM для каждого конкретного браузера.
DOM и JavaScript
DOM не является языком программирования, но без него, JavaScript он не имел бы никакой модели или представления о веб-странице, HTML-документе, XML-документе и их элементах. Каждый элемент в документе — весь документ в целом, заголовок, таблицы внутри документа, заголовки таблицы, текст внутри ячеек таблицы — это части объектной документной модели для этого документа, поэтому все они могут быть доступны и могут изменяться с помощью DOM и скриптового языка наподобие JavaScript.
В начале, JavaScript и DOM были тесно связанны, но в последствии они развились в различные сущности. Содержимое страницы хранится в DOM и может быть доступно и изменяться с использованием JavaScript, поэтому мы можем записать это в виде приблизительного равенства:
API (веб либо XML страница) = DOM + JS (язык описания скриптов)
DOM предполагался быть независимым от любого конкретного языка программирования, обеспечивая структурное представление документа согласно единому и последовательному API. Хотя мы всецело сфокусированы на JavaScript в этой справочной документации, реализация DOM может быть построена для любого языка.
Каким образом доступен DOM?
Вы не должны делать ничего особенного для работы с DOM. Различные браузеры имеют различную реализацию DOM, эти реализации показывают различную степень соответсвия с действительным стандартом DOM (это тема, которую мы пытались не затрагивать в данной документации), но каждый браузер использует свой DOM, чтобы сделать веб страницы доступными для взаимодествия с языками сценариев.
При создании сценария с использованием элемента <script> либо включая в веб страницу инструкцию для загрузки скрипта вы можете немедленно приступить к использованию программного интерфейса (API), используя элементы document или window для взаимодействия с самим документом, либо для получения потомков этого документа, т.е. различных элементов на странице.
Важные типы данных
Существует некоторое количество различных типов данных, которые используются в API, на которые вы должны обратить внимание.
Ниже таблица с кратким описанием этих типов данных.
| document | Когда член возвращает объект типа document (например, свойство элемента ownerDocument возвращает документ к которому он относится), этот обьект document является собственным корневым обьектом. В DOM document Reference разделе описан объект document. element |
| element | обозначает элемент или узел типа element, возвращаемый членом DOM API. Вместо того, чтобы говорить, что метод document.createElement() возвращает ссылку на node, мы просто скажем, что этот элемент возвращает element, который просто был создан в DOM. Объекты element реализуют DOM element интерфейс и также более общий Node интерфейс. Оба интерфейса включены в эту справку.nodeList |
| NodeList |
массив элементов, как тот, что возвращается методом Document.getElementsByTagName(). Конкретные элементы в массиве доступны по индексу двумя способами:
Эти способы эквивалентны. В первом способе item() — единственный метод объекта NodeList. Последний использует обычный синтаксис массивов, чтобы получить второе значение в списке.
|
| attribute | Когда attribute возвращается членом API (например, метод createAttribute()) — это будет ссылка на объект, который предоставляет специальный (хоть и небольшой) интерфейс для атрибутов. Атрибуты — это узлы в DOM, как и элементы, хотя вы можете редко использовать их в таком виде. |
| namedNodeMap | namedNodeMap подобна массиву, но элементы доступны по имени или индексу. Доступ по индексу — это лишь для удобства перечисления, т.к. элементы не имеют определенног порядка в списке. Этот тип данных имеет метод item() для этих целей и вы можете также добавлять и удалять элементы из namedNodeMap |
Что такое DOM?. Объектная модель документа, или… | by Hossam Hilal
Опубликовано в
·
Чтение: 4 мин.
·
1 марта 2020 г.
Объектная модель документа, или «DOM», представляет собой интерфейс к веб-страницам. По сути, это API для страницы, позволяющий программам читать и манипулировать содержимым, структурой и стилями страницы.
При загрузке веб-страницы браузер создает D документ O объект M модель страницы.
Давайте разберем это.
Путь, по которому браузер переходит от исходного HTML-документа к отображению стилизованной и интерактивной страницы в окне просмотра, называется «Критическим путем рендеринга». Хотя этот процесс можно разбить на несколько этапов, эти этапы можно грубо сгруппировать в два этапа. На первом этапе браузер анализирует документ, чтобы определить, что в конечном итоге будет отображаться на странице, а на втором этапе браузер выполняет визуализацию.
Результатом первого этапа является так называемое «дерево рендеринга». Дерево рендеринга — это представление HTML-элементов, которые будут отображаться на странице, и связанных с ними стилей. Чтобы построить это дерево, браузеру нужны две вещи:
- CSSOM, представление стилей, связанных с элементами
- DOM, представление элементов
DOM — это объектно-ориентированное представление исходный HTML-документ. У него есть некоторые отличия, как мы увидим ниже, но по сути это попытка преобразовать структуру и содержимое HTML-документа в объектную модель, которую могут использовать различные программы.
Объектная структура DOM представлена так называемым «деревом узлов». Он назван так потому, что его можно представить как дерево с одним родительским стволом, который разветвляется на несколько дочерних ветвей, каждая из которых может иметь листья. В этом случае родительский «стебель» — это корневой элемент , дочерние «ветви» — это вложенные элементы, а «листья» — это содержимое внутри элементов.
Возьмем в качестве примера этот HTML-документ:
Моя первая веб-страница
Привет, мир!
Как дела?
Этот документ можно представить в виде следующего дерева узлов:
Благодаря объектной модели JavaScript получает все возможности, необходимые для создания динамического HTML:
- JavaScript может изменять все элементы HTML на странице
- JavaScript может изменять все атрибуты HTML на странице
- JavaScript может изменять все стили CSS на странице
- JavaScript может удалять существующие элементы HTML и атрибуты
- JavaScript может добавлять новые элементы HTML и атрибуты
- JavaScript может реагировать на все существующие события HTML на странице
- JavaScript может создавать новые события HTML на странице
HTML DOM представляет собой стандартную модель объекта и программный интерфейс для HTML.
Он определяет:
- HTML-элементы как объектов
- свойств всех HTML-элементов
- методов для доступа ко всем HTML-элементам
- событий 9 0016 для всех элементов HTML
Другими словами : HTML DOM — это стандарт получения, изменения, добавления или удаления элементов HTML.
Эта разница немного более незначительна, потому что инспектор элементов DevTools обеспечивает самое близкое приближение к DOM, которое у нас есть в браузере. Однако инспектор DevTools включает дополнительную информацию, которой нет в DOM.
Лучшим примером этого являются псевдоэлементы CSS. Псевдоэлементы, созданные с помощью селекторов ::before и ::after , формируют часть CSSOM и дерева рендеринга, но технически не являются частью DOM. Это связано с тем, что DOM создается только из исходного HTML-документа, не включая стили, примененные к элементу.
Несмотря на то, что псевдоэлементы не являются частью DOM, они есть в нашем инспекторе элементов devtools.
Вот почему Javascript не может использовать псевдоэлементы, потому что они не являются частью DOM.
DOM — это интерфейс к HTML-документу. Он используется браузерами в качестве первого шага к определению того, что отображать в области просмотра, а также программами Javascript для изменения содержимого, структуры или стиля страницы.
Несмотря на то, что модель DOM похожа на другие формы исходного HTML-документа, она отличается по ряду признаков:
- Она всегда действительна HTML
- Это живая модель, которую можно модифицировать с помощью Javascript
- Это не так включать псевдоэлементы (например,
::после) - Он включает скрытые элементы (например, при отображении
: нет)
С DOM :
- JavaScript может изменять все элементы HTML на странице
- JavaScript может изменять все атрибуты HTML на странице
- JavaScript может изменять все стили CSS на странице
- JavaScript может удалять существующие HTML-элементы и атрибуты
- JavaScript может добавлять новые HTML-элементы и атрибуты
- JavaScript может реагировать на все существующие HTML-события на странице
- JavaScript может создавать новые события HTML на странице
Что такое DOM?
«ДОМ».
Кажется, он появляется везде, как только вы начинаете искать ресурсы по JavaScript. Все, кажется, быстро выхватывают аббревиатуру и говорят о ней, но, похоже, ни у кого нет простого объяснения, что это такое.
Итак… что именно является DOM?
Что такое DOM, а что нет
Во-первых, давайте составим списки того, что такое DOM — это , а — это не .
DOM
— это …
- DOM — это аббревиатура от «Document Object Model».
- DOM — это «дерево».
- DOM показывает отношения между элементами, называемыми родительскими, дочерними и одноуровневыми.
- DOM — это тип API (интерфейс прикладного программирования).
DOM
не …
- DOM не не исходный HTML или код, который вы пишете. На самом деле DOM вообще не язык программирования.
- DOM — это не то, что вы видите в браузере или в DevTools вашего браузера.
- Это также не то, что вы видите в дереве рендеринга (хотя дерево DOM является составной частью создания дерева рендеринга).
Если вы сейчас хмурите брови, не беспокойтесь. Об этом и многом другом мы поговорим в этой статье!
Итак, что же такое
на самом деле «ДОМ»?
DOM или объектная модель документа — это API, который помогает разработчикам взаимодействовать с «узлами документа» в браузере. Это не язык программирования, но он может взаимодействовать с различными языками программирования для создания возможностей просмотра веб-страниц.
Что такое API?
В API перечислены операции, которые могут использовать разработчики, а также описание того, что делают эти операции. Затем разработчики используют эти API для создания приложений, не изобретая велосипед.
Прочитайте статью freeCodeCamp «Что такое API? По-английски, пожалуйста’
Дерево DOM показывает отношения между различными «узлами» (или элементами) на веб-странице, и ваши веб-браузеры используют дерево DOM, чтобы определить, как отображать эти веб-страницы.
Вы можете думать о DOM как о «конечном выводе» вашего браузера после прочтения вашего кода.
<голова> <тело>
Добро пожаловать в DOM
<дел>Это прекрасное место
<навигация>
Однако каждый узел (или элемент HTML) разделен небольшой стрелкой, которую можно щелкнуть, чтобы открыть и проверить каждый элемент отдельно.
