Слова «DOM» используются на всех сайтах документации для разработчиков и в руководствах по написанию интерактивного кода JavaScript.
Когда вы запрашиваете веб-сайт, независимо от того, на каком языке поддерживается этот веб-сайт, он ответит HTML. Браузер получает поток HTML. Байты проходят через сложный (но полностью задокументированный) процесс анализа, который определяет различные символы (например, символ начального тега <, такой атрибут, как href, закрывающая угловая скобка, например >). После синтаксического анализа начинается процесс, называемый токенизацией. Токенизация принимает по одному символу за раз и создает токены. Токены:
- ДОКТИП
- начальный тег
- конечный тег
- комментарий
- характер
- конец файла
Давайте прервемся на секунду. В этом состоянии браузер получил байты, отправленные сервером. Браузер преобразовал байты в теги и прочитал теги, чтобы создать список токенов.
Затем этот список токенов проходит этап построения дерева. Результатом этого этапа является древовидная структура — это DOM!
Хочу отметить две важные цитаты, которые Илья сказал в видео:
древовидная структура, которая фиксирует содержимое и свойства HTML, а также все отношения между узлами. DOM представляет собой полное проанализированное представление HTML.
Таким образом, DOM — это модель (представление) отношений и атрибутов полученного HTML-документа. Помните, что DOM означает «объектная модель документа». Кое-что, что я обнаружил, было правдой, когда я учился, это то, что для того, чтобы что-то разбить, просто прочитайте это задом наперед:
Объектная модель документа
…станет…
Объектная модель документа!
Помните, что объект JavaScript представляет собой древовидную структуру со свойствами и значениями. Таким образом, доступ к DOM можно получить с помощью специального объекта, предоставленного браузером: document
Попробуйте это:
- открыть консоль на этой странице
- введите слово
document
- осторожно, чтобы не заявить об этом (
const document) - осторожно, не заключайте его в кавычки (
"document")
нажмите Ввод
Просмотр объекта document на панели консоли DevTools.
Объект document предоставляется браузером и является представлением HTML-документа. Этот объект не предоставляется языком JavaScript. ECMAScript — это спецификация языка, на которой основан JavaScript, и он ссылается на объектную модель документа только в одном месте, в разделе «Глобальный объект»:
В дополнение к свойствам, определенным в этой спецификации, глобальный объект может иметь дополнительные свойства, определяемые хостом. Сюда может входить свойство, значением которого является сам глобальный объект; например, в объектной модели HTML-документа свойство окна глобального объекта является самим глобальным объектом. ("источник")
По сути, это говорит о том, что объект document не является частью JavaScript, но ожидается, что он уже существует и будет свободно доступен для кода JavaScript.
DOM стандартизирован W3C. Существует ряд спецификаций, составляющих DOM, вот некоторые из них:
- Основная спецификация
- Спецификация событий
- Спецификация стиля
- Спецификация проверки
- Загрузить и сохранить спецификацию
