LearnCode.live
Browser Environment & Specs · learncode.live

The JavaScript Browser Environment

When JavaScript runs in a browser, it gets access to a special environment with three main parts:

  • ECMAScript - the core language (variables, functions, loops, etc.)
  • DOM (Document Object Model) - APIs to interact with HTML/XML pages
  • BOM (Browser Object Model) - APIs to interact with the browser itself
┌─────────────────────────────────────┐
│           JavaScript                │
│  ┌──────────┐ ┌──────┐ ┌────────┐   │
│  │    JS    │ │ DOM  │ │  BOM   │   │
│  │ Language │ │ APIs │ │ APIs   │   │
│  └──────────┘ └──────┘ └────────┘   │
└─────────────────────────────────────┘

The Global Object: window

In a browser, window is the global object. Every global variable, DOM API, and BOM method lives on it:

Demo: The window object
HTML 
<p id='output'></p>
JavaScript 
const out = document.getElementById('output');
out.innerHTML = 'Window inner width: ' + window.innerWidth + 'px<br>';
out.innerHTML += 'Page location: ' + window.location.href;
Live Output Window

DOM vs BOM

DOMBOM
Document Object ModelBrowser Object Model
document.getElementById()navigator.userAgent
document.querySelector()location.href
Access/manipulate page contentAccess/manipulate browser
Standardized by W3CPartly standardized (HTML spec)

DOM Specs

The DOM is maintained by the W3C and WHATWG. Modern browsers implement the DOM Living Standard which includes:

  • Core DOM - the tree structure model
  • HTML DOM - HTML-specific elements and attributes
  • CSSOM - CSS object model for styling

BOM APIs

The BOM provides browser-level objects:

  • navigator - browser info (user agent, geolocation, media devices)
  • location - URL information and navigation
  • history - session history (back, forward, pushState)
  • screen - screen dimensions
  • fetch / XMLHttpRequest - network requests
  • localStorage / sessionStorage - client-side storage
Demo: BOM APIs in action
HTML 
<p id='bom-output'></p>
JavaScript 
const el = document.getElementById('bom-output');
el.innerHTML = 'Browser: ' + navigator.userAgent + '<br>';
el.innerHTML += 'Platform: ' + navigator.platform + '<br>';
el.innerHTML += 'Screen size: ' + screen.width + 'x' + screen.height;
Live Output Window

Key Takeaways

  • JavaScript in the browser has three layers: language, DOM, BOM
  • window is the global object - all browser APIs hang off it
  • DOM lets you read and modify the page
  • BOM lets you interact with the browser itself
  • Both DOM and BOM are evolving standards - always check compatibility
Courses