Перейти к основному содержимому

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

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ
Разработчику Архитектору

DOM и BOM​

DOM описывает документ — узлы HTML на странице (работа с HTML).

BOM (Browser Object Model) описывает окружение браузера: окно, адресная строка, история переходов, данные об устройстве, размеры viewport. Корневой объект — window; в браузере глобальные переменные и функции (alert, setTimeout) живут в его области видимости.

console.log(window === globalThis); // true в современных браузерах

В Node.js вместо window — global / globalThis; DOM и BOM там нет.

Объект location​

window.location (и сокращение document.location) отражает URL текущей страницы.

Свойство / методНазначение
hrefполный URL
pathnameпуть без домена (/catalog/item)
searchстрока запроса (?id=5)
hashфрагмент (#reviews)
assign(url)переход с записью в history
replace(url)переход без новой записи в history
reload()перезагрузка страницы
const params = new URLSearchParams(location.search);
const id = params.get('id');

if (!id) {
  location.assign('/catalog');
}

Чтение location без присваивания безопасно; location.href = '...' и location.assign() инициируют навигацию. Для SPA чаще меняют маршрут через History API или роутер фреймворка, не полную перезагрузку.

Объект history​

window.history хранит стек переходов в рамках одного источника (origin).

МетодДействие
back()шаг назад
forward()шаг вперёд
go(n)на n шагов (-1 — назад)
pushState(state, title, url?)добавить запись без перезагрузки
replaceState(state, title, url?)заменить текущую запись
history.pushState({ page: 'settings' }, '', '/app/settings');

window.addEventListener('popstate', (event) => {
  console.log('Навигация назад/вперёд', event.state);
});

Событие popstate срабатывает при кнопках «назад/вперёд», не при pushState из скрипта. Данные state — произвольный сериализуемый объект; не кладите туда секреты.

Объект navigator​

navigator — сведения о браузере и возможностях устройства.

Свойство / APIТипичное использование
userAgentстрока клиента (осторожно: подделывается, не для жёсткой логики)
language / languagesпредпочитаемые языки интерфейса
onLineесть ли сеть (грубая оценка)
clipboardClipboard API — копирование текста
serviceWorkerрегистрация фонового скрипта (PWA)
mediaDevicesкамера/микрофон (WebRTC)
if (!navigator.onLine) {
  showBanner('Нет подключения — часть функций недоступна');
}

Проверка возможностей: 'geolocation' in navigator, 'serviceWorker' in navigator — надёжнее, чем разбор userAgent.

Размеры окна и прокрутка​

APIЧто измеряет
window.innerWidth / innerHeightviewport с полосами прокрутки
window.outerWidth / outerHeightвсё окно браузера с рамками
document.documentElement.clientWidthширина области просмотра <html>
window.scrollX, window.scrollYсмещение прокрутки страницы
window.scrollTo(x, y)программная прокрутка
element.scrollIntoView()прокрутить к элементу
window.addEventListener('scroll', () => {
  const scrolled = window.scrollY;
  document.body.classList.toggle('header--compact', scrolled > 80);
}, { passive: true });

Флаг passive: true на scroll/touch подсказывает браузеру, что вы не вызовете preventDefault() — прокрутка остаётся плавной.

Размеры конкретного блока на странице — через getBoundingClientRect() и ResizeObserver, не через window.

screen, open и диалоги​

window.screen — физический экран (width, height, availWidth). Нужен редко (полноэкранные режимы, аналитика).

window.open(url, target, features) — новое окно или вкладка. Всплывающие окна часто блокируются, если вызов не из прямого действия пользователя (клик).

alert, confirm, prompt — синхронные диалоги, блокируют главный поток. В продакшене UI лучше строить через разметку и модальные компоненты; нативные диалоги оставляют для отладки и простых учебных примеров.

События жизненного цикла страницы​

СобытиеКогда
DOMContentLoadedDOM построен, без ожидания картинок
loadзагружены ресурсы (включая изображения)
beforeunloadуход со страницы (можно показать предупреждение)
resizeизменился размер окна
hashchangeизменился #фрагмент в URL

Инициализацию скриптов, которым нужен готовый DOM, удобно вешать на DOMContentLoaded — см. подключение кода.

Практические правила​

  • Не смешивайте полную перезагрузку (location.href = …) и SPA-навигацию без понимания, что history и состояние приложения сбросятся.
  • Не полагайтесь на userAgent для ветвления логики — используйте feature detection.
  • Тяжёлую работу на scroll дебаунсьте или заменяйте IntersectionObserver.
  • Секреты и токены не храните в history.state и не передавайте в hash без необходимости.

Краткий итог​

BOM — это window и связанные объекты location, history, navigator, API прокрутки и размеров. DOM меняет страницу; BOM — контекст, в котором страница открыта. Для интерактивности внутри документа сочетайте BOM с событиями и DOM.

См. также

Другие статьи этого же раздела в боковом меню (как на странице «О разделе»).

Ещё 47 статей в разделе

Освоение главы0%