The Browser Object Model (BOM)

BOM is a part of JavaScript that allows developers to interact with the

browser and manipulate the window and document objects. The Browser
Object Model (BOM) allows JavaScript to "talk to" the browser.
The Browser Object Model (BOM) is a set of APIs that are used to
interact with the browser. It is not part of the core JavaScript language,
but it is an extension that is provided by the browser environment. The
BOM is used to manipulate the browser's window and document
objects, which allows developers to interact with the user interface and
control the behavior of the browser.

The BOM consists of several objects, including the window object,

the location object, the history object, the navigator object, and the screen object.
These objects provide access to different properties and methods that
can be used to manipulate the browser.

The Window Object

The window object is supported by all browsers. It represents the browser's
window.
All global JavaScript objects, functions, and variables automatically become
members of the window object.
Global variables are properties of the window object.
Global functions are methods of the window object.
Even the document object (of the HTML DOM) is a property of the window object:
window.document.getElementById("header");

is the same as:

document.getElementById("header");

Some of the most commonly used properties and methods of the window object
include:

• window.alert(): displays an alert box with a message and an OK button.

• window.prompt(): displays a dialog box that prompts the user for input.
• window.confirm(): displays a dialog box that asks the user to confirm an
action.
• window.location: provides information about the current URL and allows
the developer to navigate to a new URL.
• window.document: provides access to the HTML document that is
currently loaded in the browser.
• Window.open() opens the new window.
• Window.close() closes the current window.
• Window.setTimeout() performs action after specified time like calling
function, evaluating expressions etc.

Example of alert() in javascript

<script type="text/javascript">
function msg(){
alert("Hello Alert Box");
}
</script>
<input type="button" value="click" onclick="msg()"/>

This code will display an alert box with the message "Hello, world!".

Window Screen Object

The screen object holds information of browser screen. It can be used to display
screen width, height, colorDepth, pixelDepth etc.

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

window.screen Or screen
Properties:
• screen.width
• screen.height
• screen.availWidth
• screen.availHeight
• screen.colorDepth
• screen.pixelDepth
screen.width Property: The screen.width property returns the user’s screen
width in pixels.
HTML screen.height Property: The screen.height property returns the users
screen height in pixels.
HTML screen.availWidth Property: The screen.availWidth property returns the
users screen width in pixels, excluding the interface features like the Windows
Taskbar.
HTML screen.availHeight Property: The screen.availHeight property returns the
users screen height in pixels excluding the interface features.
HTML screen.colorDepth Property: The screen.colorDepth property returns the
bits (number) to be used to display one color. Usually, 24-bit or 32-bit hardware
is used for color resolution. 24 bits = 16, 777, 216 different (True Colors) 32 bits =
4, 294, 967, 296 different (Deep Colors)
HTML screen.pixelDepth Property: The screen.pixelDepth property returns the
pixel depth of the screen.

Window Location object

The window.location object can be written without the window prefix.

Some examples:
 • window.location.href returns the href (URL) of the current page

document.getElementById("demo").innerHTML =
"Page location is " + window.location.href;

• window.location.hostname returns the domain name of the web host

document.getElementById("demo").innerHTML =
"Page hostname is " + window.location.hostname;

• window.location.pathname returns the path and filename of the current

page

document.getElementById("demo").innerHTML =
"Page path is " + window.location.pathname;

• window.location.protocol returns the web protocol used (http: or https:)

• window.location.assign() loads a new document
• window.location.port() property returns the number of the internet host
port (of the current page).

Window History Object

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: window.history

Property of JavaScript history object

There are only 1 property of history object.

No. Property Description

1 length returns the length of the history URLs.

Methods of JavaScript history object

There are only 3 methods of history object.
No. Method Description

1 forward () loads the next page. Same as clicking forward in browser

2 back () loads the previous page. Same as clicking back in browser

3 go () loads the given page number.

Example
<script>
function goBack(){
window.history.back()
}
</script>

JavaScript Navigator Object

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

Browser Cookies

The cookieEnabled property returns true if cookies are enabled, otherwise false:

<script>
document.getElementById("demo").innerHTML =
"cookiesEnabled is " + navigator.cookieEnabled;
</script>

Browser Application Name

The appName property returns the application name of the browser

Browser Application Code Name

The appCodeName property returns the application code name of the browser

The Browser Engine

The product property returns the product name of the browser engine

The Browser Version

The appVersion property returns version information about the browser

The Browser Platform

The platform property returns the browser platform (operating system)

The Browser Language

The language property returns the browser's language

Is The Browser Online?

The onLine property returns true if the browser is online

Is Java Enabled?

The javaEnabled() method returns true if Java is enabled

Document Object Model

The document object represents the whole html document.

When html document is loaded in the browser, it becomes a document object. It is

the root element that represents the html document. When a web page is loaded,
the browser creates a Document Object Model of the page.It has properties and
methods. By the help of document object, we can add dynamic content to our web
page. it is the object of window. So

window.document

The HTML DOM model is constructed as a tree of Objects:

With the object model, JavaScript gets all the power it needs to create dynamic HTML:

• JavaScript can change all the HTML elements in the page

• JavaScript can change all the HTML attributes in the page

• JavaScript can change all the CSS styles in the page

• JavaScript can remove existing HTML elements and attributes

• JavaScript can add new HTML elements and attributes

• JavaScript can react to all existing HTML events in the page

• JavaScript can create new HTML events in the page

Methods of document object

We can access and change the contents of document by its methods. DOM methods
are actions you can perform (on HTML Elements).like add or deleting an HTML element.

The important methods of document object are as follows:

Method Description

Document.write("string") writes the given string on the document. (Html output stream)
Document.writeln("string") writes the given string on the document with newline character
at the end.

getElementById() returns the element having the given id value.

getElementsByName() returns all the elements having the given name value.

getElementsByTagName() returns all the elements having the given tag name.

getElementsByClassName() returns all the elements having the given class name.

The getElementById Method

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</ The most common way to access an HTML element is to use the id of the
element.

In the example above the getElementById method used id="demo" to find the
element.

script>

Changing HTML Elements

The easiest way to modify the content of an HTML element is by using
the innerHTML property.
Property Description

element.innerHTML = new html content Change the inner HTML of an element

element.attribute = new value Change the attribute value of an HTML

element

element.style.property = new style Change the style of an HTML element

Method Description

element.setAttribute(attribute, value) Change the attribute value of an HTML

element

Adding and Deleting Elements

Method Description

document.createElement(element) Create an HTML element

document.removeChild(element) Remove an HTML element

document.appendChild(element) Add an HTML element

document.replaceChild(new, old) Replace an HTML element

document.write(text) Write into the HTML output

stream

Adding Events Handlers

Method Description

document.getElementById(id).onclick = function(){code} Adding event handler

code to an onclick event