Browser Object Model (BOM)— Javascript Notes

Intro to Browser Object Model

Introduction:

Browser Object Model in Javascript represents the current browser window. It includes the properties and methods for javascript to interact with the web browser.

For example, when an HTML document is opened in a browser window, the browser interprets the document as a collection of hierarchical objects(HTML tags) and accordingly displays the data contained in these objects(HTML page rendering). The browser parses the document and creates a collection of objects, which defines the documents and their details.

With DOM we can only access the web page but not the browser. To interact with the browser we use “BOM”.

The browser object can be accessed using the window object.

The window is a default browser object. So we can write alert() instead of a window.alert().

Window —

The window objects represent the window in the browser. The window is the object of the browser, not javascript. The javascript objects are string, array, date, etc.

Methods of Windows Object — The important method of the window object are as follows:

window.innerHeight, window.innerWidth to calculate the width and height of the visual space.

alert() — displays the alert box containing the message with the ok button.

confirm() — displays the confirm dialog box containing the message with the ok and cancel button.

prompt() — displays a dialog box to get input from the user.

open(URL) — opens the URL in a new tab.

close ()— close the current window

setTimeout() — performs an action after specified time like calling function, evaluating expressions, etc.

setInterval() — performs an action repetitively after a fixed duration of time, like calling function, evaluating expressions, etc.

List of objects available inside the window object.

Document — will update the link here

History —

The JavaScript history object represents an array of URLs visited by the user. By using this object, you can load previous, forward, or any particular page.

The history object is the window property, so it can be accessed by the window.history or history

Property —

length: returns the length of the history URLs. (history the length)

Method:

forward() — loads the next page. // history.forward()

back() — loads the previous page. //history.back()

go() — loads the given page number. //history.go(2) for 2next page, (-2) for previous 2 page

Navigator —

The JavaScript navigator object is used for browser detection. It can be used to get browser information such as appName, appCodeName, userAgent, etc.

The navigator object is the window property, so it can be accessed by the window.navigator or navigator.

Property —

appName: returns the name

appVersion: returns the version

appCodeName: returns the code name

UserAgent: returns the userAgent

cookieEnabled: returns true if the cookie is enabled otherwise false

Methods —

javaEnabled() — Check if java is enabled

taintEnabled() — Check if taint is enabled

Screen —

The JavaScript screen object holds information on the browser screen. It can be used to display screen width, height, color depth, pixel depth,

The screen object is the window property, so it can be accessed by window.screen or screen.

Property —

width — returns the width of the screen

height — returns the height of the screen

availWidth — returns the available width

availHeight — returns the available height

colorDepth — returns the color depth

pixelDepth — returns the pixed Depth

Location

The location object contains information about the current URL.

The location object is the window property, so it can be accessed by window.location or location.

Property —

href — Sets or returns the entire URL

origin — Returns the protocol, hostname and port number of a URL

hash — Sets or returns the anchor part (#) of a URL

search — Sets or returns the query string part of a URL

pathname — Sets or returns the pathname of a URL

port — Sets or returns the port number of a URL

Method —

assign() — Loads a new document // location.assign(‘www.google.com’)

reload() — Reloads the current document

replace() — Replaces the current document with a new one //location.replace(“www.google.com");