document и window

window — глобальный объект браузерного окружения; document — его свойство, предоставляющее доступ к DOM-дереву текущей страницы.

Зачем нужно

window является корневым объектом в браузере: все глобальные переменные и функции автоматически становятся его свойствами. document — точка входа для работы с HTML-структурой: чтение, изменение, создание и удаление узлов. Понимание разницы между ними необходимо для любой работы с браузерным API.

Где используется

  • Работа с DOM: поиск, создание и изменение элементов через document
  • Управление окном: размеры, навигация, таймеры через window
  • Хранение глобального состояния приложения
  • Работа с URL, историей и location
  • Подписка на глобальные события (resize, scroll, online)

Основной контент

window — глобальный объект

// В браузере window === globalThis
console.log(window === globalThis); // true

// Глобальные переменные — свойства window
var x = 42;
console.log(window.x); // 42

// Встроенные API доступны через window
window.setTimeout( => console.log('hi'), 1000);
window.alert('Сообщение');

// Размеры окна
console.log(window.innerWidth);  // ширина viewport
console.log(window.innerHeight); // высота viewport

// Навигация
console.log(window.location.href); // текущий URL
window.location.href = 'https://example.com'; // переход

document — доступ к DOM

// document — свойство window
console.log(window.document === document); // true

// Метаданные страницы
console.log(document.title);       // заголовок вкладки
console.log(document.URL);         // текущий URL
console.log(document.readyState);  // 'loading' | 'interactive' | 'complete'

// Корневые элементы
console.log(document.documentElement); // <html>
console.log(document.head);            // <head>
console.log(document.body);            // <body>

Событие DOMContentLoaded vs load

// DOMContentLoaded: HTML разобран, DOM готов (без ресурсов)
document.addEventListener('DOMContentLoaded', () => {
  console.log('DOM готов');
  const btn = document.getElementById('btn');
  btn.addEventListener('click', handleClick);
});

// load: всё загружено (картинки, стили, скрипты)
window.addEventListener('load', () => {
  console.log('Страница полностью загружена');
});

// Глобальные события window
window.addEventListener('resize', () => {
  console.log(`Новый размер: ${window.innerWidth}x${window.innerHeight}`);
});

window.addEventListener('scroll', () => {
  console.log(`Прокрутка: ${window.scrollY}px`);
});

Полезные методы document

// Создание элементов
const div = document.createElement('div');
div.textContent = 'Привет';
document.body.appendChild(div);

// Чтение содержимого
console.log(document.title);
document.title = 'Новый заголовок'; // запись

// Фрагмент для батчинга вставок
const fragment = document.createDocumentFragment;
for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = `Пункт ${i}`;
  fragment.appendChild(li);
}
document.querySelector('ul').appendChild(fragment); // один reflow

Частые ошибки

  • Скрипт запускается до готовности DOM — обращение к элементам до DOMContentLoaded возвращает null. Решение: размещать <script> в конце <body> или использовать атрибут defer.
  • Смешивание var и глобального пространства — переменные, объявленные через var на верхнем уровне, попадают в window и могут перезаписать встроенные свойства. Используйте let/const или модули.
  • Прямое присвоение window.location вместо window.location.href — в некоторых браузерах вызывает неожиданное поведение.

Связанные темы

Ресурсы