Browser Object Model

The Browser Object Model (BOM) is a browser-specific convention referring to all the objects exposed by the web browser. When the browser parses a document, it creates a collection of objects that define the document and detail how it should be displayed. The object that the browser creates is known as the Document Object . It is part of a larger collection of objects that the browser makes use of. This collection of browser objects is collectively known as the Browser Object Model, or BOM. BOM is not standardized by ECMAScript , though it is described as core part of JavaScript. The important BOM objects are as:

document
location
history
navigator
screen
frames

There is a hierarchy of browser objects that are used to manipulate methods and properties associated with the Web browser itself. The top level object in the BOM is the window object. The window object represents the browser window. All other browser objects are contained within the window object. The window object includes a number of properties and methods that can be used to control the Web browser. A good portion of client-side Web develop is in working with the properties and methods associated with the browser itself, with its windows, and with the documents that occupy them. The browser's window is represented by a global object called window object. The Window object is supported by all the major browsers and contains all the global JavaScript objects. Any function, object or variable in JavaScript becomes a member of the Window Object. 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();

The Document element which is root of DOM elements are part of BOM in object hierarchy. The Document object represents the Web page displayed in the browser. All elements on a Web page including HTML tags are contained within the document object. Since the document object is often considered the most important part of the BOM, it is represented by its own object model called the Document Object Model or DOM . Unlike the Document Object Model, there is no standard for implementation and no strict definition, so browser vendors are free to implement the BOM in any way they wish. All global objects, functions, variables of JavaScript are members of Window object by default. JavaScript allows window reference to be omitted while accessing most of its elements. 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>

Next : How to detect the OS on the client machine in JavaScript?

Related Topics