Тема действительно сложная. Но, как говорится, не так страшен чёрт, как его малюют. Вот тут-то самый крепкий орешек достаётся мне: этакая сверхзадача «намалевать» по возможности удобоваримо, но и не совсем примитивно. Пока что все прочитанные мной материалы тяготеют либо к зауми, либо к примитиву.
Что такое DOM
Аббревиатура DOM расшифровывается как Document Object Model (объектная модель документа).
DOM - это программный интерфейс доступа к содержимому HTML, XHTML и XML-документов, то есть представление тэгов и атрибутов HTML, XHTML и XML, а также стилей CSS в виде объектов программирования. С этой моделью работает как JavaScript, так и другие языки web-программирования.
Немного истории
Существует 4 уровня DOM (0, 1, 2 и 3).
Уровень 0 (1996) включал в себя модели DOM , которые существовали до появления уровня 1. В основном это коллекции: document.images, document.forms, document.layers и document.all. Эти модели формально не являются спецификациями DOM , опубликованными W3C . Скорее они представляют информацию о том, что существовало до начала процесса стандартизации.
Уровень 1 (1997) включал также базовые функциональные возможности по обработке XML-документов: многочисленные способы работы с отдельными узлами, работа с инструкциями обработки XML и т.д.
Кроме того, DOM уровня 1 содержит ряд специальных интерфейсов, которые могут обрабатывать отдельные HTML-элементы. Например, можно работать с таблицами HTML, формами, списками выбора и т.д.
В DOM уровня 2 (2002) было добавлено несколько новых возможностей.
Если в DOM уровня 1 отсутствовала поддержка пространств имён, то интерфейсы DOM уровня 2 содержат методы для управления пространствами имён, связанными с требованиями к составлению и обработке XML-документов.
Помимо этого, DOM уровня 2 поддерживает события.
Уровень 2 является текущим уровнем спецификаций DOM , однако W3C рекомендует и некоторые разделы спецификаций уровня 3.
DOM уровня 3 - это рабочий проект спецификации, которая расширяет функциональность DOM уровня 2. Одна из наиболее важных особенностей этой версии спецификации заключается в возможности работать с многочисленными расширениями DOM .
Что означает «программный интерфейс»?
Английское слово interface можно перевести как «область контакта». Компьютер, грубо говоря, понимает только две вещи: пустой бит и заполненный бит. Язык, на котором «говорит» компьютер, можно представить как нескончаемую вереницу нулей и единиц, дающих бесконечное количество различных комбинаций.
Любой программный код - это вразумительная для программиста интерпретация этих «нулей и единиц», с которыми работает компьютер. Таким образом, любой язык программирования является интерфейсом человека и машины.
Браузеры работают так же, как и другие компьютерные приложения. Они интерпретируют в «нули и единицы» коды HTML, XML, CSS, скрипты JavaScript, PHP, Perl и т.д. Для работы с этим многоязычием нужна общая платформа. Этой платформой и является DOM - спецификация, не зависящая от конкретного языка программирования или разметки. Это интерфейс, который можно использовать во многих популярных языках программирования, связанных с созданием web-страниц и способных понимать и интерпретировать объекты DOM .
DOM и браузеры
DOM и JavaScript
В JavaScript вершиной иерархической лестницы объектов DOM , своеобразным «проводником» в этот интерфейс служит объект document , а объекты DOM становятся его свойствами, свойствами его свойств и т.д. Их также называют узлами DOM .
Узлы DOM
В DOM уровня 2 есть 12 типов узлов. За каждым типом узла DOM закреплена константа с уникальным именем. Большинство узлов предназначено для работы с XML . В сборке HTML - JavaScript , которой мы занимаемся, можно использовать только 5 типов. Но и эта «верхушка айсберга» представляет собой весьма «развесистое дерево», которое не охватить за одно-два занятия.
Полный набор констант типов узлов, определённый в спецификации W3C DOM (голубым подсвечены узлы, доступные для HTML - JavaScript ):
Имя константы |
Значение |
Описание |
Node.ELEMENT_NODE |
Узел элемента (возвращает корневой элемент документа, для HTML-документов это элемент HTML) |
|
Node.ATTRIBUTE_NODE |
Узел атрибута (возвращает атрибут элемента XML- или HTML-документа) |
|
Текстовый узел (#text) |
||
Node.CDATA_SECTION_NODE |
Узел секции CDATA (XML: альтернативный синтаксис для отображения символьных данных) |
|
Node.ENTITY_REFERENCE_NODE |
||
Node.ENTITY_NODE |
Узел раздела |
|
Node.PROCESSING_INSTRUCTION_NODE |
Узел директивы XML |
|
Node.COMMENT_NODE |
Узел комментария |
|
Node.DOCUMENT_NODE |
Узел документа (основа доступа к содержанию документа и создания его составляющих) |
|
Node.DOCUMENT_TYPE_NODE |
Узел типа документа (возвращает тип данного документа, т.е. значение тэга DOCTYPE) |
|
Node.DOCUMENT_FRAGMENT_NODE |
Узел фрагмента документа (извлечение части дерева документа, создание нового фрагмента документа, вставка фрагмента в качестве дочернего элемента какого-либо узла и т.п.) |
|
Node.NOTATION_NODE |
Узел нотации* |
* Нотации - это имена, идентифицирующие формат неанализируемых разделов, формат элементов, имеющих атрибут нотации, или прикладную программу, которой адресована директива. (Непонятно? Мне пока тоже не очень.)
Структура документа в модели DOM
Все объекты документа являются узлами DOM. Рассмотрим элементарный документ:
< title>DOM"center" > Заголовок
Текст абзаца
Вот схема его DOM-дерева:
Каждый узел может иметь дочерние узлы (на схеме к ним ведут стрелки). Объект document - основание дерева документа - тоже узел, но у него нет родительского узла и имеется ряд свойств и методов, отсутствующих у других узлов. Он имеет один дочерний узел: элемент .
У элемента два дочерних узла:
и , для которых дочерними становятся все элементы, содержащиеся в них.Внимание!
«Элемент» и «тэг» не синонимы. Тэг - это знак разметки:
- это два разных тэга. А элемент - объект, помеченный этими тэгами: Текст абзаца
Элементы
Document Object Model
Самый простой способ доступа к элементу с JavaScript – это атрибут id. Давайте добавим указанную выше ссылку в файл index.html с id=»nav».
...
Document Object Model
Home
...
Загрузите (или обновите) страницу в окне браузера и посмотрите на DOM, чтобы убедиться, что код был обновлен.
Затем используйте метод getElementById() для доступа ко всему элементу. В консоли введите следующее:
document.getElementById("nav");
Home
Метод getElementById() извлечет весь элемент. Теперь вместо того, чтобы вводить этот объект и метод каждый раз, когда вам нужно получить доступ к ссылке nav, вы можете поместить элемент в переменную, чтобы с ним было проще работать.
let navLink = document.getElementById("nav");
Переменная navLink содержит анкор. Здесь можно легко изменять атрибуты и значения. Например, чтобы изменить место ссылки, измените атрибут href:
navLink.href = "https://www.wikipedia.org";
Также можно изменить текст, переназначив свойство textContent:
navLink.textContent = "Navigate to Wikipedia";
Теперь, просмотрев этот элемент в консоли или проверив тег Elements, вы увидите, как он обновился.
navLink;
Navigate to Wikipedia
Изменения отобразятся и на фронт-энде.
Обновление страницы вернет все исходные значения.
На этом этапе вы должны понимать, как использовать метод document для доступа к элементу, как присвоить элемент переменной и как изменить свойства и значения в элементе.
Дерево и узлы DOM
Все элементы в DOM определяются как узлы. Существует множество типов узлов, но есть три основных, с которыми вы будете работать чаще всего:
- Узел элемента
- Текстовый узел
- Узел комментария
Когда элемент HTML является элементом в DOM, он называется узлом элемента. Любой одиночный текст вне элемента является текстовым узлом, а комментарий HTML – узлом комментария. Помимо этих трех типов узлов, сам объект document – это узел документа, который является корневым узлом всех остальных узлов.
DOM состоит из древовидной структуры вложенных узлов, которая часто называется деревом DOM. Вы наверняка знаете, что собой представляет генеалогическое дерево – это схематичное представление родственных связей, которое состоит из родителей, детей и ближайших родственников. Узлы в DOM также называются родительскими и дочерними в зависимости от их отношения к другим узлам.
Для примера создайте файл nodes.html. добавьте в него текстовый узел, а также узлы комментария и элемента.
An element node
A text node.
Узел элемента html является родительским. head и body – дочерние узлы html. body содержит три дочерних узла, и все они находятся на одном уровне – тип узла не влияет на уровень вложения.
Примечание : При работе с DOM, сгенерированным HTML, отступы исходного кода HTML создают много пустых текстовых узлов, которые не будут видны во вкладке DevTools Elements. Больше об этом по ссылке .
Определение типа узла
Каждый узел в документе имеет тип, доступ к которому осуществляется через свойство nodeType. В Mozilla Developer Network имеется обновленный список всех констант типов узлов. Ниже приведена таблица наиболее распространенных типов узлов.
Во вкладке Elements в Developer Tools вы можете заметить, что всякий раз, когда вы нажимаете и выделяете любую строку в DOM, рядом с ней появляется значение == $0. Это очень удобный способ получить доступ к текущему активному элементу.
В консоли node.html нажмите на первый элемент в body (h1).
С помощью консоли узнайте тип выбранного узла с помощью свойства nodeType.
$0.nodeType;
1
Выбрав элемент h1, вы увидите 1 как вывод, который относится к ELEMENT_NODE. Сделайте то же самое с другими узлами, и они вернут 3 и 8 соответственно.
Зная, как получить доступ к элементу, вы можете увидеть тип узла, не выделяя элементы в DOM.
document.body.nodeType;
1
В дополнение к nodeType вы также можете использовать свойство nodeValue, чтобы узнать значение текстового узла или узла комментария, а nodeName – для получения тега элемента.
Изменение DOM с помощью событий
До сих пор вы видели, как изменять DOM в консоли, а такие изменения, как известно, временные; каждый раз, когда страница обновляется, все изменения теряются. В вы обновляли цвет фона страницы в консоли. Попробуйте объединить то, чему вы научились в этом мануале, с тем, что вы уже знаете, чтобы создать интерактивную кнопку, которая будет менять цвет фона.
Вернитесь в файл index.html и добавьте элемент button с id. Также нужно добавить ссылку на новый файл в новый js-каталог js/scripts.js.
Document Object Model
Событие в JavaScript – это действие, которое выполняет пользователь. Пользователь наводит указатель мыши на элемент, нажимает на него или на определенную клавишу на клавиатуре – это все события. В этом конкретном случае кнопка должна выполнить действие, когда пользователь нажмет на нее. Для этого нужно добавить слушателя событий. Создайте файл scripts.js и сохраните его в новом каталоге js. В файле нужно определить элемент button и присвоить его переменной.
Используя метод addEventListener(), кнопка будет прослушивать клики и выполнять свою функцию после клика.
...
button.addEventListener("click", () => {
// action will go here
});
Внутри функции нужно поместить код из предыдущего мануала, чтобы изменить цвет фона на fuchsia.
...
Так выглядит скрипт:
let button = document.getElementById("changeBackground");
button.addEventListener("click", () => {
document.body.style.backgroundColor = "fuchsia";
});
Сохраните и закройте файл. Обновите страницу index.html в браузере. Нажмите на новую кнопку, и цвет фона страницы изменится.
Tags: ,Этот раздел представляет краткое знакомство с Объектной Моделью Документа (DOM) - что такое DOM, каким образом предоставляются структуры HTML и XML документов, и как взаимодействовать с ними. Данный раздел содержит справочную информацию и примеры.
Что такое Объектная Модель Документа (DOM)?
Объектная Модель Документа (DOM) – это программный интерфейс (API) для HTML и XML документов. DOM предоставляет структурированное представление документа и определяет то, как эта структура может быть доступна из программ, которые могут изменять содержимое, стиль и структуру документа. Представление DOM состоит из структурированной группы узлов и объектов, которые имеют свойства и методы. По существу, DOM соединяет веб-страницу с языками описания сценариев либо языками программирования.
Веб-страница – это документ. Документ может быть представлен как в окне браузера, так и в самом HTML-коде. В любом случае, это один и тот же документ. DOM предоставляет другой способ представления, хранения и управления этого документа. DOM полностью поддерживает объектно-ориентированнное представление веб-страницы, делая возможным её изменение при помощи языка описания сценариев наподобие JavaScript.
Каким образом доступен DOM?
Вы не должны делать ничего особенного для работы с DOM. Различные браузеры имеют различную реализацию DOM, эти реализации показывают различную степень соответсвия с действительным стандартом DOM (это тема, которую мы пытались не затрагивать в данной документации), но каждый браузер использует свой DOM, чтобы сделать веб страницы доступными для взаимодествия с языками сценариев.
При создании сценария с использованием элемента
Самый внешний тег - , поэтому дерево начинает расти от него.
Внутри находятся два узла:
и - они становятся дочерними узлами для .Теги образуют узлы-элементы (element node). Текст представлен текстовыми узлами (text node). И то и другое - равноправные узлы дерева DOM.
Пример посложнее
Рассмотрим теперь более жизненную страничку:
- Лось - животное хитрое
- .. И коварное
Корневым элементом иерархии является html . У него есть два потомка. Первый - head , второй - body . И так далее, каждый вложенный тег является потомком тега выше:
На этом рисунке синим цветом обозначены элементы-узлы, черным - текстовые элементы.
Дерево образовано за счет синих элементов-узлов - тегов HTML.
А вот так выглядит дерево, если изобразить его прямо на HTML-страничке:
Кстати, дерево на этом рисунке не учитывает текст, состоящий из одних пробельных символов. Например, такой текстовый узел должен идти сразу после
- . DOM, не содержащий таких "пустых" узлов, называют "нормализованным"
.
- Осторожно
- Информация
- Осторожно
- Информация
- Все дочерние элементы, включая текстовые находятся в массиве childNodes .
В следующем примере цикл перебирает всех детей document.body .
For(var i=0; i
- Свойства firstChild и lastChild показывают на первый и последний дочерние элементы и равны null , если детей нет.
- Свойство parentNode указывает на родителя. Например, для таким элементом является : alert(document.body.parentNode == document.documentElement) // true
- Свойства previousSibling и nextSibling указывают на левого и правого братьев узла.
- Синяя линия - массив childNodes
- Зеленые линии - свойства firstChild , lastChild .
- Красная линия - свойство parentNode
- Бордовая и лавандовая линии внизу - previousSibling , nextSibling
- CSSOM, представление стилей, связанных с элементами
- DOM, представление элементов
- html
- head
- title
- My first web page
- title
- body
- h1
- Hello, world!
- p
- How are you?
- h1
- head
- html
- head
- body
- Hello, world!
2. Когда DOM модифицируется кодом Javascript
Помимо того, что DOM является интерфейсом для просмотра содержимого документа HTML, он сам также может быть изменен.
Мы можем, например, создать дополнительные узлы для DOM, используя Javascript.
Var newParagraph = document.createElement("p"); var paragraphContent = document.createTextNode("I"m new!"); newParagraph.appendChild(paragraphContent); document.body.appendChild(newParagraph);
Этот код изменит DOM, но изменения не отобразятся в документе HTML .
DOM – это не то, что вы видите в браузере (то есть, дерево рендеринга)
В окне просмотра браузера вы видите дерево рендеринга, которое, как я уже говорил, является комбинацией DOM и CSSOM. Чем отличается DOM от дерева рендеринга, так это то, что последнее состоит только из того, что в конечном итоге будет отображено на экране.
Поскольку дерево рендеринга имеет отношение только к тому, что отображается, оно исключает элементы, которые визуально скрыты. Например, элементы, у которых есть стили с display: none .
Hello, world!
DOM будет включать элемент
- html
- head
- body
- h1
- Hello, world!
- p
- How are you?
- h1
Однако дерево рендеринга и, следовательно, то, что видно в окне просмотра, не будет включено в этот элемент.
- html
- body
- h1
- Hello, world!
- h1
- body
DOM – это не то, что отображается в DevTools
Это различие немного меньше, потому что инспектор элементов DevTools обеспечивает самое близкое приближение к DOM, которое мы имеем в браузере. Однако инспектор DevTools содержит дополнительную информацию, которой нет в DOM.
Лучший пример этого – псевдоэлементы CSS. Псевдоэлементы, созданные с использованием селекторов ::before и ::after , являются частью CSSOM и дерева рендеринга, но технически не являются частью DOM. Это связано с тем, что DOM создается только из исходного HTML-документа, не включая стили, примененные к элементу.
Несмотря на то, что псевдоэлементы не являются частью DOM, они есть в нашем инспекторе элементов devtools.
Резюме
DOM – это интерфейс к HTML-документу. Он используется браузерами как первый шаг к определению того, что визуализировать в окне просмотра, и кодом Javascript для изменения содержимого, структуры или стиля страницы.
Рассмотрим чуть более сложный документ.
Верхний тег - html , у него дети head и body , и так далее. Получается дерево тегов:
Атрибуты
В этом примере у узлов есть атрибуты: style , class , id . Вообще говоря, атрибуты тоже считаются узлами в DOM-модели, родителем которых является элемент DOM, у которого они указаны.
Однако, в веб-программировании в эти дебри обычно не лезут, и считают атрибуты просто свойствами DOM-узла, которые, как мы увидим в дальнейшем, можно устанавливать и менять по желанию программиста.
Вообще-то это секрет, но DOCTYPE тоже является DOM-узлом, и находится в дереве DOM слева от HTML (на рисунке этот факт скрыт).
P.S. Насчет секрета - конечно, шутка, но об этом и правда далеко не все знают. Сложно придумать, где такое знание может пригодиться...
Нормализация в различных браузерах
При разборе HTML Internet Explorer сразу создает нормализованный DOM, в котором не создаются узлы из пустого текста.
Firefox - другого мнения, он создает DOM-элемент из каждого текстового фрагмента.
Поэтому в Firefox дерево этого документа выглядит так:
На рисунке для краткости текстовые узлы обозначены просто решеткой. У body вместо 3 появилось 7 детей.
Opera тоже имеет чем похвастаться. Она может добавить лишний пустой элемент "просто от себя".
Чтобы это увидеть - откройте документ . Он выдает число дочерних узлов document.body , включая текстовые узлы.
У меня получается 3 для IE, 7 для Firefox и 8 (!?) для Opera.
На практике эта несовместимость не создает больших проблем, но нужно о ней помнить. Например, разница может проявить себя в случае перебора узлов дерева.
Возможности, которые дает DOM
Зачем, кроме красивых рисунков, нужна иерархическая модель DOM?
Очень просто:
Каждый DOM-элемент является объектом и предоставляет свойства для манипуляции своим содержимым, для доступа к родителям и потомкам.
Для манипуляций с DOM используется объект document .
Используя document , можно получать нужный элемент дерева и менять его содержание.
Например, этот код получает первый элемент с тэгом ol , последовательно удаляет два элемента списка и затем добавляет их в обратном порядке:
Var ol = document.getElementsByTagName("ol") var hiter = ol.removeChild(ol.firstChild) var kovaren = ol.removeChild(ol.firstChild) ol.appendChild(kovaren) ol.appendChild(hiter)
Для примера работы такого скрипта - кликните на тексте на лосиной cтраничке
В старых руководствах и скриптах можно встретить модификацию HTML-кода страницы напрямую вызовом document.write .
В современных скриптах этот метод почти не используется, случаи его правильного применения можно пересчитать по пальцам.
Избегайте document.write.. Кроме случаев, когда вы действительно знаете, что делаете (а зачем тогда читаете самоучитель - вы и так гуру)
Разберем подробнее способы доступа и свойства элементов DOM.
Доступ к элементам
Любой доступ и изменения DOM берут свое начало от объекта document .
Начнем с вершины дерева.
document.documentElement
Самый верхний тег. В случае корректной HTML-страницы, это будет .
document.body
Тег
, если есть в документе (обязан быть).Следующий пример при нажатии на кнопку выдаст текстовое представление объектов document.documentElement и document.body . Сама строка зависит от браузера, хотя объекты везде одни и те же.
Типы DOM-элементов
У каждого элемента в DOM-модели есть тип. Его номер хранится в атрибуте elem.nodeType
Всего в DOM различают 12 типов элементов.
Обычно используется только один: Node.ELEMENT_NODE , номер которого равен 1. Элементам этого типа соответствуют HTML-теги.
Иногда полезен еще тип Node.TEXT_NODE , который равен 3. Это текстовые элементы.
Остальные типы в javascript программировании не используются.
Следующий пример при нажатии на кнопку выведет типы document.documentElement , а затем тип последнего потомка узла document.body . Им является текстовый узел.
Текст
Пример
Например, вот так выглядел бы в браузере документ из примера выше, если каждый видимый элемент обвести рамкой с цифрой nodeType в правом верхнем углу.
Здесь показаны только элементы внутри body , т.к только они отображаются на странице. Для элементов типа 1 (теги) в скобочках указан соответствующий тег, для текстовых элементов (тип 3) - стоит просто цифра.
Дочерние элементы
В общем. если взять отдельно
с детьми из нормализованного DOM - такая картинка получается ОТ :
И такая - для ссылок наверх и между узлами:
Этих свойств вполне хватает для удобного обращения к соседям.
Свойства элементов
У DOM-элементов есть масса свойств. Обычно используется максимум треть из них. Некоторые из них можно читать и устанавливать, другие - только читать.
Есть еще и третий вариант, встречающийся в IE - когда устанавливать свойство можно только во время создания элемента.
Рассмотрим здесь еще некоторые (не все) свойства элементов, полезные при работе с DOM.
tagName
Атрибут есть у элементов-тегов и содержит имя тега в верхнем регистре, только для чтения.
Например,
Alert(document.body.tagName) // => BODY
style
Это свойство управляет стилем. Оно аналогично установке стиля в CSS.
Например, можно установить element.style.width:
Исходный код этой кнопки:
Есть общее правило замены - если CSS-атрибут имеет дефисы, то для установки style нужно заменить их на верхний регистр букв.
Например, для установки свойства z-index в 1000, нужно поставить:
Element.style.zIndex = 1000
innerHTML
Когда-то это свойство поддерживалось только в IE. Теперь его поддерживают все современные браузеры.
Оно содержит весь HTML-код внутри узла, и его можно менять.
Свойство innerHTML применяется, в основном, для динамического изменения содержания страницы, например:
Document.getElementById("footer").innerHTML = "
Bye!
"Пожалуй, innerHTML - одно из наиболее часто используемых свойств DOM-элемента.
className
Это свойство задает класс элемента. Оно полностью аналогично html-атрибуту "class".
Elem.className = "newclass"
onclick , onkeypress, onfocus ...
И другие свойства, начинающиеся на "on...", хранят функции-обработчики соответствующих событий. Например, можно присвоить обработчик события onclick .
Подробнее об этих свойствах и обработчиках событий - см.
Объектная модель документа, или «DOM», является программным интерфейсом доступа к элементам веб-страниц. По сути, это API страницы, позволяющий читать и манипулировать содержимым, структурой и стилями страницы. Давайте разберемся как это устроено и как это работает.
Как строится веб-страница?
Процесс преобразования исходного HTML-документа в отображаемую стилизованную и интерактивную страницу, называется “Critical Rendering Path”(“Критическим путем рендеринга”). Хотя этот процесс можно разбить на несколько этапов, как я описал это в статье «Понимание критического пути рендеринга », эти этапы можно условно сгруппировать в два этапа. В первом браузер анализирует документ, чтобы определить, что в конечном итоге будет отображаться на странице, а во второй браузер выполняет рендеринг.
Результатом первого этапа является то, что называется “render tree”(«дерево рендеринга»). Дерево рендеринга – это представление элементов HTML, которые будут отображаться на странице, и связанных с ними стилей. Чтобы построить это дерево, браузеру нужны две вещи:
Из чего состоит DOM?
DOM – это объектное представление исходного HTML-документа. Он имеет некоторые различия, как мы увидим ниже, но по сути это попытка преобразовать структуру и содержание документа HTML в объектную модель, которая может использоваться различными программами.
Структура объектов DOM представлена тем, что называется «деревом узлов». Оно так называется, потому что его можно рассматривать как дерево с одним родительским элементом, который разветвляется на несколько дочерних ветвей, каждая из которых может иметь листья. В этом случае родительский «элемент» – это корневой элемент, дочерние «ветви» – это вложенные элементы, а «листья» – это содержимое внутри элементов.
Давайте рассмотрим этот HTML-документ в качестве примера:
Hello, world!
How are you?
Этот документ может быть представлен в виде следующего дерева узлов:
Чем DOM не является
В приведенном выше примере кажется, что DOM является отображением 1: 1 исходного HTML-документа. Однако, как я уже говорил, есть различия. Чтобы полностью понять, что такое DOM, нам нужно взглянуть на то, чем он не является.
DOM не является копией исходного HTML
Хотя DOM создан из HTML-документа, он не всегда точно такой же. Есть два случая, в которых DOM может отличаться от исходного HTML.
1. Когда HTML содержит ошибки разметки
DOM – это интерфейс доступа к действительных (то есть уже отображаемым) элементам документа HTML. В процессе создания DOM, браузер сам может исправить некоторые ошибки в коде HTML.
Рассмотрим в качестве примера этот HTML-документ:
Hello, world!
В документе отсутствуют элементы
и , что является обязательным требованием для HTML. Но если мы посмотрим на получившееся дерево DOM, то увидим, что это было исправлено: