Episode 1 — Fundamentals / 1.16 — Using Browser Functionalities in JavaScript

1.16.a — Browser Object Model (BOM)

In one sentence: The BOM is the set of browser-provided objects rooted at window — navigator, location, history, and document — that let JavaScript interact with the browser chrome, environment, and navigation, alongside the DOM.

Navigation: ← 1.16 Overview · 1.16.b — Location & History →

1. BOM vs DOM

DOMBOM
StandardW3C / WHATWG — document structureMix of WHATWG HTML + legacy de-facto APIs
Core objectdocument (tree of nodes)window (global object + browser services)
Typical useRead/change page contentNavigate, resize, timers, alert, storage, geolocation…

document lives on window: window.document === document in pages.

2. window

  • Global object in browsers — top-level var / function declarations become window properties (non-strict legacy); global let/const do not.
  • window.innerWidth / innerHeight — viewport size.
  • window.scrollY, scrollTo() — scrolling.
  • window.setTimeout / setInterval — timers (also global without window.).
  • window.location, window.history, window.navigator — shortcuts to sub-objects.

3. navigator

Information about the browser and runtime — not for “sniffing” security decisions alone.

Property / methodUse
navigator.userAgentString identifying browser/engine (fragile for feature detection)
navigator.language, languagesLocale preferences
navigator.onLineRough network connectivity hint
navigator.clipboardClipboard API (permissions-gated)
navigator.geolocationLocation (user permission)

Prefer feature detection (if ('geolocation' in navigator)) over parsing userAgent.

4. history

Represents the session history stack for the tab — back/forward list (see 1.16.b).

5. location

window.location (same as document.location in modern browsers) — current URL, protocol, host, path, query, hash — and methods to navigate or reload (see next lesson).

6. document

The DOM root — elements, events, creation APIs. Covered in 1.14; here it sits in the BOM mental map as the bridge from window to the page tree.

7. Key takeaways

  1. window is the global browser hub; document is the DOM entry.
  2. navigator describes environment and optional device APIs.
  3. location + history control where the user is in URL space and time (navigation stack).

Explain-It Challenge

Explain without notes:

  1. What is one capability window provides that document does not?
  2. Why is navigator.userAgent alone a weak way to decide if a feature exists?
  3. How are location and history different in one sentence each?

Navigation: ← 1.16 Overview · 1.16.b — Location & History →