The Browser Object Model (BOM)

The Browser Object Model (BOM) allows JavaScript to "talk to" the browser. While there are no official standards for the BOM, most modern browsers use the same properties and methods.

The Window Object

The window object is supported by all browsers. It represents the browser's window and is the global object for all JavaScript elements.

• All global JavaScript objects, functions, and variables automatically become members of the window object.
• Global variables are properties of the window object.
• Global functions are methods of the window object.
• Even the document object (of the HTML DOM) is a property of the window object!

Window Size

You can determine the size of the browser window (the viewport) using two properties. These values are in pixels and do not include toolbars or scrollbars.

• window.innerWidth: The inner width of the browser window.
• window.innerHeight: The inner height of the browser window.

let width = window.innerWidth;
let height = window.innerHeight;

Useful Window Methods

The window object provides several methods to control browser behavior:

• window.open(): Opens a new window.
• window.close(): Closes the current window.
• window.moveTo(): Moves the current window.
• window.resizeTo(): Resizes the current window.

BOM vs. DOM

While the DOM focuses on the content *inside* the page, the BOM focus on the environment *surrounding* the page (the browser window).

Key Points to Remember

• The window object is the "Father" of all browser objects
• Global variables become window properties
• innerWidth/innerHeight return viewport dimensions
• The BOM handles navigation, screen info, and timing
• You can skip the window. prefix for global methods
• The document object is actually a sub-property: window.document