Browser Object Model

The Browser Object Model (BOM) is a collection of JavaScript objects provided by web browsers that allow developers to interact with and manipulate various aspects of the browser window and the user's environment. Unlike the Document Object Model (DOM), which deals with the structure and content of the web page, the BOM focuses on the browser itself. The BOM provides objects and methods to control browser features such as windows, frames, history, location, and more.

Some common objects and properties in the Browser Object Model include:

  1. window: Represents the browser window and serves as the global object in client-side JavaScript.
  2. document: Represents the web page being displayed and provides access to its content through the DOM.
  3. navigator: Contains information about the user's browser and operating system.
  4. location: Represents the URL of the current web page and provides methods to manipulate it.
  5. history: Represents the user's browsing history and allows navigation back and forth.
  6. screen: Provides information about the user's screen dimensions and resolution.

Global Object

The browser's window is indeed represented by a global object known as the window object. The window object is a fundamental component of web browsers and is consistently supported by major browsers. It encapsulates various global JavaScript objects, and any function, object, or variable declared in JavaScript becomes inherently associated with the window object. This design effectively makes these elements accessible as members of the Window object, providing a unified and accessible environment for managing and interacting with browser-related functionalities. Few examples of window object properties and methods as follows:

window.open("", newWindow, "width=500, height=500"); window.frames[0].location = "https://net-informations.com"; window.close(); var winWidth = window.innerwidth; var winHeight = window.innerHeight; window1.moveTo(500, 300); window1.focus();

Document element

The Document element, serving as the root of DOM elements, is an integral component within the Browser Object Model (BOM) hierarchy. This Document object symbolizes the web page that is presented in the browser. All constituents of a web page, encompassing HTML tags, reside within this Document object. Due to its paramount importance within the BOM, it possesses a distinct object model referred to as the Document Object Model (DOM).

Unlike the standardized and well-defined Document Object Model, the BOM lacks a uniform implementation or strict specification, affording browser vendors the freedom to implement it according to their preferences. Additionally, all global JavaScript objects, functions, and variables inherently align with the Window object, forming part of its membership. Notably, JavaScript often permits the omission of the window reference when accessing numerous elements, contributing to a more concise syntax. Examples of Global objects as follows:

window.document.getElementById("Para1"); document.getElementById("Para1");

The example shown in the above two statements means the same.

BOM example
<!DOCTYPE html> <html> <head> <title>BOM Examples</title> <script> var browserInfo = window.navigator.appName + " " + window.navigator.appVersion; document.write("<h2>Browser Info</h2><p>"+browserInfo +"</p>"); var newWindow; function opennewWindow() { newWindow = window.open("", "", "width=500, height=300, top=150, left=150"); newWindow.document.title = "New Window"; paraGraph = document.createElement("P"); paraGraph_text = document.createTextNode("New Paragraph"); paraGraph.appendChild(paraGraph_text); newWindow.document.body.appendChild(paraGraph); } function closenewWindow() { if (newWindow != undefined) { newWindow.close(); newWindow = undefined; } else { alert("Nothing to open !!"); } } </script> </head> <body> <h2>BOM Window Object</h2> <p> <input type="button" value="Open Window" onclick="opennewWindow()" /> <input type="button" value="Close Window" onclick="closenewWindow()" /> </p> </body> </html>

Developers can use the BOM to perform tasks such as opening new browser windows, redirecting to different URLs, manipulating the browser's history, displaying alerts and prompts, and interacting with the user's device and environment.

Conclusion

It's important to note that the BOM is not standardized by any official specification like the DOM is. This means that different browsers may provide slightly different BOM features and methods, leading to inconsistencies in behavior across browsers.






Related Topics
  1. JavaScript Interview Questions (Part2)
  2. JavaScript Interview Questions (Part3)
  3. Is JavaScript a true OOP language?
  4. Advantages and Disadvantages of JavaScript
  1. Difference Between JavaScript and ECMAScript?
  2. What is noscript tag?
  3. Escaping Special Characters in JavaScript
  4. What is undefined x 1 in JavaScript?
  5. Logical operators in JavaScript
  6. Difference between '=', '==' and '===' operators in JS
  7. How to loop through objects in JavaScript?
  8. How to write html code dynamically using JavaScript?
  9. How to add html elements dynamically with JavaScript?
  10. How to load another html page from javascript?
  11. What Is The Disadvantages Using InnerHTML In JavaScript?
  12. How to detect the OS on the client machine in JavaScript?
  13. Difference between window, document, and screen in Javascript?
  14. Difference between the substr() and substring() in JavaScript?
  15. How to replace all occurrences of a string in JavaScript?
  16. Test a string as a literal and as an object in JavaScript
  17. What is Associative Array in JavaScript
  18. What is an anonymous function in JavaScript?
  19. What is the use of 'bind' method in JavaScript?
  20. Pure functions Vs. Impure functions in javascript
  21. Is Javascript a Functional Programming Language?
  22. What's the Difference Between Class and Prototypal Inheritance?
  23. Javascript, Pass by Value or Pass by Reference?
  24. How to prevent modification of an object in Javascript?
  25. What is 'this' keyword in JavaScript?
  26. How Does Function Hoisting Work in JavaScript?
  27. What do mean by NULL in Javascript?
  28. What does the delete operator do in JavaScript?
  29. What is the Infinity property used for in Javascript?
  30. Event bubbling and Event Capturing in JavScript?
  31. What is "strict mode" and how is it used in JavaScript?
  32. What is the difference between call and apply in JavaScript
  33. Entire content of a JavaScript source file in a function block?
  34. What is an immediately-invoked function expression?
  35. What is escape & unescape String functions in JavaScript?
  36. Instanceof operator in JavaScript
  37. What Are RESTful (REpresentational State Transfer)Web Services?
  38. What is Unobtrusive JavaScript & Why it's Important?
  39. What Does JavaScript Void(0) Mean?
  40. What are JavaScript Cookies?
  41. Difference between Client side JavaScript and Server side JavaScript
  42. TypeError: document.getelementbyid(...) is null
  43. Uncaught TypeError: Cannot read property of undefined In JavaScript
  44. Null and Undefined in JavaScript