What is the BOM in JavaScript

Browser Window window

The global object window represents the browser window and is the root of the BOM. Many properties and methods of the BOM can be accessed through window.

For example,

console.log(window.innerHeight); // Height of the window
console.log(window.innerWidth); // Width of the window

Browser Information navigator

The navigator object provides information about the browser being used. Among other things, it can be used to detect the name and version of the browser, as well as the platform on which it is running.

For example,

console.log(navigator.userAgent); // Browser information
console.log(navigator.platform); // Platform on which it is running

Screen Information screen

The screen object represents the user’s screen and provides information about its size and resolution.

For example,

console.log(screen.width); // Width of the screen
console.log(screen.height); // Height of the screen
console.log(screen.availWidth); // Available width of the screen
console.log(screen.availHeight); // Available height of the screen
console.log(screen.pixelDepth); // Pixel depth of the screen

URL Information location

The location object provides information about the current URL and allows redirection to other pages.

For example,

console.log(location.href); // Current URL
console.log(location.host); // Host of the current URL
console.log(location.pathname); // Path of the current URL
location.href = "https://www.example.com"; // Redirect to another page

Document document

The document object represents the web page loaded in the browser window and is the root of the DOM.

For example,

 // Title of the page
console.log(document.title);

// Body of the page
console.log(document.body); 

// Element with the ID "myElement"
console.log(document.getElementById("myElement")); 

Browser History history

JavaScript allows modifying the browser’s history using the history object. For example, we can add a new entry to the browser’s history using the pushState() method.

For example,

// adds a new entry in the browser's history 
// with a URL containing the parameter `page` with the value `1`.
history.pushState({page: 1}, "Title", "?page=1");

// replaces the current entry in the history with a new entry 
// with a URL containing the parameter `page` with the value `2`.
history.replaceState({page: 2}, "Title", "?page=2");

Performance Information performance

The performance object provides access to information related to the performance of the web page, such as load times and navigation events.

For example, to measure the exact time elapsed since the page was loaded:

// Time in milliseconds since the loading started
console.log(performance.now()); 

Application Cache applicationCache

The applicationCache object allows managing the web application’s cache, facilitating the storage of resources (such as CSS files, images, and JavaScript) for offline use.

For example, to check the status of the application cache:

// Cache status (for example, 0 = no cache, 1 = cache in use)
console.log(applicationCache.status); 

We can also add events related to the cache status, such as cached, updateready, and error.

applicationCache.addEventListener("event", callback)