BOM is an acronym for Browser Object Model. And when we say browser, we're referring to a window in any browser, such as Firefox, Chrome, or Internet Explorer.
What is BOM?
The Browser Object Model is a browser-specific convention that refers to all web browser objects.The Browser Object Model allows manipulation and access of the browser window.
As there is no standard for BOM, different browsers implement it differently. Developers can use the BOM to move the window, change the text in the status bar, and do other things that aren't directly related to the page content.
The figure below shows the relation between DOM and BOM.
Now, let’s see the various types of Browser Object Model.
Types of Browser Object Model
- Windows Object Model
- Screen Object Model
- History Object Model
- Navigator Object Model
- Location Object Model
Windows Object Model
Different methods of Windows Object Model are:
|Windows Object Method||Method Description|
|alert()||The alert box message is displayed with the OK button in the Windows method.|
|confirm()||The confirm dialog box message is displayed in the Windows method with the OK and Cancel buttons.|
|close()||Closes the current window using the Windows method.|
|open()||The Windows method opens a new window.|
|prompt()||It asks the user to type in some text. A dialogue box for user input is displayed by the Windows method.|
|setTimeout()||After a certain time, a Windows method performs actions such as calling functions, evaluating expressions, etc.|
|setInterval()||It repeatedly calls a callback function with a fixed delay between each call.|
The above table describes the windows object methods.
Screen Object Model
The Screen Object Model allows us to retrieve browser data like screen width, height, color depth, pixel depth, etc.
The properties of the Screen Object Model are listed below:
|Screen Object Property||Description|
|width||This method returns the width of the screen.|
|height||This method returns the height of the screen.|
|availWidth||This method returns the available width of the screen.|
|availHeight||This method returns the available height of the screen.|
|colorDepth||This method returns the color depth.|
|pixelDepth||This method returns the pixel depth.|
The above table describes the screen object property.
History Object Model
The History Object Model returns an array of URLs that the user has visited in their browser history.
The methods for the history object model are listed below:
|History Object Method||Description|
|forward()||This method loads the next page.|
|go()||This method loads a page with the specified page number.|
|back()||This method loads the previous page.|
Navigator Object Model
The Navigator Object Model allows us to retrieve browser information such as the application name, cookie information, version, user language, user agent information, etc.
The properties of the Navigator Object Model are listed below:
|Navigator Object Property||Description|
|appName||This method returns the name of the application.|
|appVersion||This method returns the version of the application.|
|language||This method returns languages that are supported by Firefox and Netscape browsers.|
|appCodeName||This method returns the name of the code.|
|cookieEnabled||This method returns whether the cookies are enabled or not.|
|userAgent||This method returns the details of the user agent.|
|userLanguage||This method returns the user language that is supported by the Internet Explorer browser.|
|systemLanguage||This method returns the system language that is supported by the Internet Explorer browser.|
|plugins||This method returns the plugins that are compatible with the Netscape and Firefox browsers.|
|platform||This method returns the windows platform|
|online||It informs whether the browser is online or not.|
Location Object Model
|assign()||This method loads a new web page document.|
|reload()||Reload the current document using the location.href property.|
|replace()||The current document is replaced with the new specified document. It is not possible to return to a previous document using the back button on the browser.|
Frequently Asked Questions
Q1) Which does BOM stand for?
Answer: BOM stands for Browser Object Model.
Q3) Which object in BOM is the top object?
Answer: The window object is the highest level object in the BOM. The window object represents the browser window. The window object is the container for all other browser objects. A number of properties and methods in the window object can be used to control the web browser.
Answer: BOM can be considered a superset of DOM. There are a lot of objects, methods, and properties in BOM that aren't in the DOM structure.
If you want to learn advanced front-end web development, Coding Ninjas has one of the best courses available, which you can find here.
Thank you for reading!