window vs document

window is the browser tab; document is the page inside it. document is a property of window, so window.document === document.

window — the environment

The global object in a browser. Everything global lives on it: setTimeout, fetch, localStorage, location, history, console, and any var declared at top level.

window.innerWidth;               // viewport size
window.location.href;            // current URL
window.addEventListener("resize", onResize);
window.scrollTo(0, 0);

Because it is the global object, you can usually omit it — setTimeout(...) and window.setTimeout(...) are the same call.

document — the content

The root of the DOM tree, and where every element-related API lives:

document.querySelector(".card");
document.createElement("div");
document.title = "New title";
document.addEventListener("DOMContentLoaded", init);

Which events go where

This is the practical distinction. resize, scroll, load, hashchange, online/offline and beforeunload belong to window. DOMContentLoaded, and delegated element events such as click, are listened for on document.

Putting a listener on the wrong one is a common cause of "my handler never fires" — document.addEventListener("resize", ...) silently does nothing.

Related globals

navigator for browser and device information, screen for display size, location and history for the URL. All are properties of window.

In other environments

Neither exists in Node or a Web Worker. Code that touches window or document breaks during server-side rendering, which is why frameworks guard it with typeof window !== "undefined" or defer it to an effect that only runs in the browser.