The BOM (Browser Object Model)

The Browser Object Model (BOM) is a set of JavaScript objects provided by web browsers that allow you to interact with the browser itself and its features. While the Document Object Model (DOM) deals with the content and structure of a web page, the BOM deals with the browser window and its components. The BOM is not standardized like the DOM and can vary between browsers.

Key BOM Objects and Features:

• window Object: Represents the browser window and provides properties and methods to manipulate it.
• document Object: Represents the current HTML document being displayed in the browser window.
• navigator Object: Provides information about the user’s browser and operating system.
• location Object: Represents the current URL of the browser window and provides methods to navigate to different URLs.
• history Object: Represents the browser’s session history and allows you to navigate backward and forward.
• screen Object: Represents the user’s screen and provides information about its size and resolution.
• setTimeout() and setInterval(): Methods for executing code after a specified delay or at regular intervals.

Examples of BOM Usage:

Opening a New Browser Window: You can use the window.open() method to open a new browser window with the specified URL and dimensions.

      const newWindow = window.open("https://www.example.com", "_blank", "width=600,height=400");
    

Changing Browser Location:

You can use the window.location object to change the current URL of the browser window.

      window.location.href = "https://www.newurl.com";
    

Checking Browser Compatibility:

You can use the navigator.userAgent property to determine the user’s browser and version.

      if (navigator.userAgent.includes("Chrome")) {
        console.log("You are using Google Chrome.");
      }
    

Using Timers:

You can use setTimeout() to execute code after a specified delay and setInterval() to repeatedly execute code at intervals.

      setTimeout(function() {
        console.log("Delayed message after 2 seconds.");
      }, 2000);

      setInterval(function() {
        console.log("Repeating message every 5 seconds.");
      }, 5000);
    

Some Diagrams to depict the BOM

Examining the Browser Object Model (BOM)

Examining the Browser Object Model (BOM) involves using JavaScript to interact with and access various BOM objects and their properties. You can do this directly in your browser’s developer console. Here’s how you can examine the BOM using the developer console:

1. Open Developer Console:

In most browsers, you can open the developer console by pressing the F12 key or right-clicking on a web page and selecting “Inspect” or “Inspect Element.”

2. Access BOM Objects:

Once the developer console is open, you can start examining BOM objects by typing their names followed by a dot (.). The console will then show you a list of properties and methods available for that object.

3. Examples:

To access the window object, simply type window. and you’ll see a list of properties and methods you can interact with. To examine the browser’s location, type window.location and press Enter. You’ll see the properties of the location object. Similarly, you can examine other BOM objects like document, navigator, history, and more.

Here’s a quick example of examining the window and navigator objects in the developer console:

1. Open a web page in your browser.
2. Open the developer console (usually with F12 or right-click and “Inspect”).
3. Type window. and press Enter. You’ll see a list of properties and methods associated with the window object.
4. Type window.location and press Enter. You’ll see the properties of the location object.
5. Type navigator. and press Enter. You’ll see a list of properties and methods associated with the navigator object.

You can also experiment by using various properties and methods provided by the BOM objects. This hands-on exploration will give you a better understanding of how the BOM works and how you can interact with it using JavaScript.

Finally, the following will work too:

Open the developer console to see BOM objects and their properties.

    // Access the window object and log its properties
    console.log("Window object:", window);

    // Access the location object and log its properties
    console.log("Location object:", window.location);

    // Access the navigator object and log its properties
    console.log("Navigator object:", navigator);

    // Access the document object and log its properties
    console.log("Document object:", document);
    

The Browser Object Model provides powerful tools to interact with the browser window and its features, enabling you to create dynamic and interactive web applications. Keep in mind that while the DOM is standardized, the BOM can have variations between different browsers, so it’s important to test your code in various browsers to ensure compatibility.