Вы, наверное, знаете, что такое DOM, но знаете ли вы спецификацию?

Javascript теперь больше язык только для Интернета. Он может работать независимо на многих платформах, будь то веб-браузер, сервер или любая другая хост-среда.

Хост-среда в дополнение к базовой языковой конструкции предоставляет свои собственные объекты и функции. Эти объекты, предоставляющие переменные и функции, доступные где угодно, называются глобальными объектами и по умолчанию встроены в язык или среду. Если среда представляет собой веб-браузер, то этот глобальный объект является окном. В Node.js это называется глобальным. Недавно в язык было добавлено globalThis в качестве стандартного имени для ссылки на глобальный объект, и оно поддерживается на разных платформах.

Объектная модель браузера (BOM)

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

WINDOW «корневой» объект

Объект в «корне» веб-браузера — это window. Он представляет свойства текущего открытого «окна браузера» и является глобальным объектом для JavaScript, работающего в веб-браузере. Даже document и screen являются свойствами объекта окна.

Примечание. Каждая вкладка браузера имеет собственный объект окна.

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

Чтобы узнать больше об этих свойствах и методах, обратитесь к документации MDN или просто откройте инструменты разработчика браузера, введите окно консоли и нажмите Enter. Вы увидите все методы и свойства объекта окна.

Объект документа

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

Самый простой пример, свидетелями которого были многие из нас, — это document.getElementById(‘some id’). Используя этот метод, мы могли легко манипулировать содержимым элемента с определенным идентификатором.

Чтобы узнать больше о манипулировании DOM, посетите ресурс W3Schools.

document и windowobject хотя и имеют некоторые перекрывающиеся имена для методов и свойств, но их поведение различно. Самый простой пример — это window.open(), который откроет новую пустую вкладку, document.open() создаст пустой документ в том же окне.

Объект экрана

Объект экранаявляется частью спецификации, но является еще одним свойством объекта окна. Объект экрана представляет информацию, характерную для экрана пользователя, такую ​​как высота просмотра экрана, его ширина, глубина в пикселях и т. д. Объект экрана имеет ограниченные свойства и методы, см. Документацию MDN, чтобы узнать более.