Что умеет браузер: window, DOM и BOM

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

У вашего кода в браузере есть хозяин — объект window. Он одновременно и окно вкладки, и глобальный объект: всё, что объявлено глобально, и всё, что даёт браузер, становится его свойством. Поэтому document и window.document — одно и то же имя, просто префикс обычно не пишут.

js

window.appName = "Дневник";
console.log(appName);

console.log(window === globalThis);
console.log(typeof window.document);
console.log(typeof window.setTimeout);

страница примера

Сначала предположите, что выведет код

Из этого следует неприятное: глобальная область в браузере — не пустая комната, а чужая квартира с мебелью. Ваше глобальное имя может совпасть с уже существующим свойством окна, и тогда победит не ваш код.

У window заранее заняты совсем обычные имена: name, length, top, status, closed. Присвойте глобально name = 42 — и прочитаете обратно строку «42»: за этим именем стоит браузерный сеттер, который приводит значение к строке. Ещё один довод не заводить глобальные переменные вообще.

Получив HTML, браузер не хранит его как текст. Он разбирает разметку и строит дерево объектов — DOM, Document Object Model. Корень дерева лежит в document, ниже идут элементы, текстовые узлы и комментарии; у каждого узла свои свойства и методы.

js

const post = document.getElementById("post");

console.log(post.tagName);
console.log(post.children.length);
console.log(post.querySelector(".lead").textContent);

страница примера

Сначала предположите, что выведет код

Дерево живое. Меняете свойство объекта — страница перерисовывается, добавляете узел — он появляется на экране. Обратной связи с исходным HTML нет: исходник давно прочитан и забыт, вы работаете с деревом.

js

const menu = document.getElementById("menu");

const item = document.createElement("li");
item.textContent = "Контакты";
menu.append(item);

console.log(menu.children.length);
console.log(menu.lastElementChild.textContent);

страница примера

Сначала предположите, что выведет код

Строку можно отдать браузеру, но обратно вы получите узлы, а не текст: парсер отрабатывает сразу же.

js

const box = document.getElementById("box");
console.log(box.childNodes.length);

box.innerHTML = "<p>Абзац</p>";
console.log(box.children.length);
console.log(box.firstElementChild.tagName);
console.log(box.textContent);

страница примера

Сначала предположите, что выведет код

DOM отвечает за содержимое страницы. Всё, что вокруг неё — адрес, история переходов, сведения о браузере и экране — собрано под неофициальным именем BOM, Browser Object Model. Спецификации ровно с таким названием не существует; это просто удобная граница между «страницей» и «окном».

Главные жильцы: location — адрес, разобранный на части; history — кнопки «назад» и «вперёд»; navigator — паспорт браузера и точка входа во многие возможности устройства; screen — размеры экрана. Устроен location так же, как обычный URL, поэтому его удобно изучать на любом адресе.

js

const url = new URL("https://java-script.pro/part2/browser-env?theme=dark#dom");

console.log(url.hostname);
console.log(url.pathname);
console.log(url.searchParams.get("theme"));
console.log(url.hash);

Сначала предположите, что выведет код

js

console.log(typeof navigator.userAgent);
console.log("geolocation" in navigator);
console.log(typeof window.history.length);
console.log(typeof screen.width);

страница примера

Сначала предположите, что выведет код

Сам язык даёт синтаксис и скромный набор встроенных объектов: Object, Array, Math, JSON, Promise. Всё остальное, чем вы пользуетесь в браузере — DOM, события, таймеры, fetch, хранилища, звук, камера — это Web API: интерфейсы, которые хост подкладывает в тот же глобальный объект.

js

console.log(typeof JSON.parse); // язык
console.log(typeof Promise); // язык

console.log(typeof setTimeout); // браузер
console.log(typeof fetch); // браузер
console.log("localStorage" in window);

страница примера

Сначала предположите, что выведет код

Типичный Web API — объект с методами и событиями. И событие не обязано приходить от человека: вызов element.click() или dispatchEvent запускает ровно ту же цепочку обработчиков, что и настоящее нажатие. На этом держатся и отладка, и тесты.

js

const button = document.getElementById("like");
const count = document.getElementById("count");
let likes = 0;

button.addEventListener("click", () => {
  likes += 1;
  count.textContent = String(likes);
});

button.click();
button.click();

console.log(likes);
console.log(count.textContent);

страница примера

Сначала предположите, что выведет код

Один и тот же движок исполняет JavaScript и в Chrome, и в Node.js — но окружения у них разные. В Node нет ни window, ни document: там нечего рисовать. Зато есть файловая система, процессы и сеть без ограничений браузера.

Что	Браузер	Node.js
Глобальный объект	window	global
Общее имя для обоих	globalThis	globalThis
Страница	document, элементы, события	DOM отсутствует
Файлы	только то, что дал пользователь	модуль node:fs, весь диск
Сеть	fetch с правилами CORS	любые сокеты, CORS не действует
Где выполняется код	на чужом устройстве	на вашем сервере

Отсюда практическое правило: библиотека, которая трогает document, не заведётся на сервере, а та, что читает файлы через node:fs, не соберётся для браузера. Универсальный код пишут через globalThis и проверку возможностей.

js

console.log(globalThis === window);
console.log(typeof globalThis.document);
console.log(typeof globalThis.process);

страница примера

Сначала предположите, что выведет код

Ни один учебник не перечислит все Web API — их сотни, и список растёт. Зато окружение отвечает на вопросы само: наберите в консоли DevTools document. и получите список свойств, а console.dir(document.body) покажет элемент как объект, а не как разметку.

js

function supports(name) {
  return name in window;
}

console.log(supports("fetch"));
console.log(supports("IntersectionObserver"));
console.log(supports("teleportUser"));

страница примера

Сначала предположите, что выведет код

Такая проверка называется feature detection: если API нет, включают запасной путь, а не падают. Консоль, правда, знает только про ваш браузер — на вопрос «а есть ли это в Safari» отвечают MDN и caniuse.com. Короткий ответ на страницах MDN — статус Baseline, разобранный в прологе: Widely available — пишите; Newly available — знайте, что у части людей браузер старее; Limited availability — без запасного пути не рассчитывайте.

Элемент — обычный объект с прототипной цепочкой. Чем конкретнее тип, тем больше он умеет: у input есть value, а общие для всех узлов методы лежат выше по цепочке.

js

const field = document.getElementById("field");

console.log(field instanceof HTMLInputElement);
console.log(field instanceof HTMLElement);
console.log(field instanceof Node);
console.log(field.value);

страница примера

Сначала предположите, что выведет код

window — глобальный объект браузера: и ваши глобальные имена, и всё, что даёт браузер, лежат его свойствами.
DOM — про содержимое страницы: document и дерево живых узлов, не связанное с исходным текстом HTML.
BOM — неофициальное имя для всего вокруг страницы: location, history, navigator, screen.
Web API — интерфейсы от хоста (события, таймеры, fetch, хранилища); к языку они не относятся, и в Node их может не быть — общее имя глобального объекта для обоих миров — globalThis.
Что доступно, спрашивают у консоли: проверка «имя» in window, console.dir и прототипы элемента; кроссбраузерность — на MDN и caniuse.

1/3Что из списка даёт браузер, а не сам язык JavaScript?

2/3Куда относят объект location, хранящий адрес страницы?

3/3Модуль должен работать и в браузере, и в Node. Как получить глобальный объект?

Паспорт элемента

На подложке лежит карточка. Допишите код так, чтобы он вывел число абзацев внутри неё и текст второго абзаца.

js

const card = document.getElementById("card");
console.log(card.tagName); // "SECTION"

// дальше ваш код: нужно получить 2 и "Часть II"

страница примера

Сначала предположите, что выведет код

Заголовок h3 — тоже элемент, поэтому children здесь не подойдёт: нужен запрос именно по абзацам.

jsлистинг · не запускается

const card = document.getElementById("card");
console.log(card.tagName); // "SECTION"

const paragraphs = card.querySelectorAll("p");
console.log(paragraphs.length); // 2
console.log(paragraphs[1].textContent); // "Часть II"

const card = document.getElementById("card");
console.log(card.tagName); // "SECTION"

const paragraphs = card.querySelectorAll("p");
console.log(paragraphs.length); // 2
console.log(paragraphs[1].textContent); // "Часть II"

querySelectorAll возвращает не массив, а NodeList: индексы и forEach у него есть, а map нет — если нужен массив, оберните в Array.from.

Кнопка, которую нажимает код

Повесьте на кнопку обработчик click, который увеличивает число в output на единицу. Затем нажмите кнопку из кода три раза — так, чтобы в консоль вывелось "3".

js

const tick = document.getElementById("tick");
const total = document.getElementById("total");

console.log(total.textContent); // "0"

// ваш код

страница примера

Сначала предположите, что выведет код

Состояние удобнее держать в переменной, а в DOM только показывать: textContent всегда строка, и считать в ней неудобно.

jsлистинг · не запускается

const tick = document.getElementById("tick");
const total = document.getElementById("total");
let value = 0;

tick.addEventListener("click", () => {
  value += 1;
  total.textContent = String(value);
});

tick.click();
tick.click();
tick.click();

console.log(total.textContent); // "3"

const tick = document.getElementById("tick");
const total = document.getElementById("total");
let value = 0;

tick.addEventListener("click", () => {
  value += 1;
  total.textContent = String(value);
});

tick.click();
tick.click();
tick.click();

console.log(total.textContent); // "3"

Метод click() вызывает настоящее событие: оно всплывает и доходит до всех обработчиков — так же сработал бы и tick.dispatchEvent(new MouseEvent("click")).

Что умеет браузер: window, DOM и BOM

Видеоразбор темы за 5–7 минут

windowГлобальный объект, в котором вы живёте

DOM: страница как дерево объектовРазметка превращается в живые объекты

BOM: браузер вокруг страницыАдрес, история, навигатор и экран

Web API: всё, что даёт хостСобытия, таймеры, сеть и хранилище

Браузер против Node.jsОдин язык, два разных окружения

Где смотреть, что доступноКонсоль отвечает быстрее, чем документация

Итогошпаргалка по теме

Проверьте себятри быстрых вопроса

Задачидве задачи с решениями

Паспорт элемента

Кнопка, которую нажимает код