Сегодня мы рассмотрим DOM и BOM. Что такое DOM и BOM?
DOM (объектная модель документа): объектная модель документа, которая предоставляет методы и свойства для управления элементами страницы.
BOM (объектная модель браузера); объектная модель браузера, предоставляющая некоторые свойства и методы для работы с браузером.
Я думаю многие видели такое официальное объяснение, так что давайте разберем его вместе.
1. Что такое BOM и DOM?
Javascript состоит из трех частей: ECMAScript, DOM и BOM. В зависимости от хоста (браузера) конкретные проявления также различаются.IE и другие браузеры имеют разные стили.IE расширяет спецификацию и добавляет класс ActiveXObject, который может создавать экземпляры объектов ActiveX через JavaScript.
1. ECMAScript (ядро) Описывает синтаксис и основные объекты JS.
2. DOM — объектная модель документа, методы и интерфейсы для обработки веб-контента. является стандартом W3C; [стандарт, которого обычно придерживаются все браузеры]
3. Спецификация — это объектная модель браузера, которая предоставляет методы и интерфейсы для взаимодействия с браузером. Каждый производитель браузеров реализует DOM в своих браузерах в соответствии со своими браузерами; [показывает, что разные браузеры имеют разные определения и разные реализации]
1) Введение в ДОМ
Полное название DOM — Document Object Model, то есть объектная модель документа. представляет собой древовидный API для XML. Он описывает методы и интерфейсы для обработки веб-контента.Это API HTML и XML.DOM планирует всю страницу в документ, состоящий из уровней узлов.
Этот DOM определяет HTMLDocument и HTMLElement в качестве основы для этой реализации, то есть для того, чтобы программно манипулировать содержимым этого HTML (например, добавлять определенные элементы, изменять содержимое элементов, удалять определенные элементы), мы помещаем этот HTML рассматривается как дерево объектов (DOM-дерево), само себя и все в нем, например . Эти теги рассматриваются как объект, каждый объект называется узлом (node), узел можно понимать как DOM. родительский класс всех объектов в .
2) Введение спецификации
Спецификация — это объектная модель браузера, объектная модель браузера.Я только что сказал, что DOM — это интерфейс, который, по-видимому, управляет документом, а BOM, как следует из названия, на самом деле является интерфейсом, который, по-видимому, управляет поведением браузера.
Что может браузер? Например, для перехода на другую страницу, вперед, назад и т. д. программе также может понадобиться получить такие параметры, как размер экрана. Таким образом, спецификация — это интерфейс, который решает эти проблемы. Например, если мы хотим, чтобы браузер перешел на другую страницу, нам нужно толькоlocation.href = "http://www.xxxx.com"; Это местоположение является объектом в спецификации.
Разница между DOM и BOM
Площадь ДОМ:
Область 5 (то есть документ. Папка, тщательно написанная веб-разработчиками, содержащая index.html, CSS и JS, развернутая на сервере, мы можем ввести URL-адрес через адресную строку браузера и нажать Enter, чтобы войти в документ. Загрузить в local, просмотреть, щелкнуть правой кнопкой мыши для просмотра исходного кода и т. д.)
Область спецификации:
Область 1 (вкладки браузера, адресная строка, строка поиска, панель закладок, масштабирование окна и кнопка восстановления закрытия, строка меню и т. д.)
Область 2 (полоса прокрутки)
Область 3 (контекстное меню браузера)
Область 4 (строка состояния при загрузке документа, отображение кода состояния http и т. д.)
Три соединения DOM и BOM
Ядром BOM является Window, а объект Window выполняет двойную роль: это не только интерфейс для доступа к окну браузера через js, но и глобальный (глобальный) объект. Это означает, что любые объекты, переменные и функции, определенные на веб-странице, имеют окно в качестве своего глобального объекта.
Объект Окно содержит свойства: документ, местоположение, навигатор, экран, история, кадры
Корневой узел документа содержит дочерние узлы: формы, вставки, якоря, изображения, ссылки.
Из window.document видно, что наиболее фундаментальным объектом DOM является дочерний объект оконного объекта спецификации.
Поскольку окно спецификации содержит документ, свойство документа объекта окна можно использовать напрямую, а к содержимому и структуре документа XHTML можно обращаться, извлекать и изменять через свойство документа. Поскольку объект документа является корневым узлом модели DOM (объектная модель документа).
Можно сказать, что спецификация содержит DOM (объект), а браузер предоставляет доступ к объекту спецификации, от объекта спецификации к объекту DOM, так что js может управлять браузером и документами, читаемыми браузером.
Вывод: будьте трудолюбивым, старательным и активным фронтенд-инженером.