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
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>
Related Topics
- JavaScript Interview Questions (Part2)
- JavaScript Interview Questions (Part3)
- Is JavaScript a true OOP language?
- Advantages and Disadvantages of JavaScript
- Difference Between JavaScript and ECMAScript?
- What is noscript tag?
- Escaping Special Characters in JavaScript
- What is undefined x 1 in JavaScript?
- JavaScript : Logical Operators
- Difference between '=', '==' and '===' operators?
- How to reload a page using JavaScript?
- How to write html code dynamically using JavaScript?
- How to add html elements dynamically with JavaScript?
- How to load another html page from javascript?
- What Is The Disadvantages Using InnerHTML In JavaScript?
- How to detect the OS on the client machine in JavaScript?
- Difference between window, document, and screen in Javascript?
- Difference between the substr() and substring() in JavaScript?
- How to replace all occurrences of a string in JavaScript?
- How to test a string as a literal and as an object ?
- What is Associative Array? How do we use it?
- What is an anonymous function in JavaScript?
- What is the use of 'bind' method in JavaScript?
- Pure functions Vs. Impure functions in javascript
- Is Javascript a Functional Programming Language?
- What's the Difference Between Class and Prototypal Inheritance?
- Javascript, Pass by Value or Pass by Reference?
- How to prevent modification of an object in Javascript?
- What is 'this' keyword in JavaScript?
- How Does Function Hoisting Work in JavaScript?
- What do mean by NULL in Javascript?
- What does the delete operator do in JavaScript?
- What is the Infinity property used for in Javascript?
- Event bubbling and Event Capturing in JavScript?
- What is "strict mode" and how is it used in JavaScript?
- What is the difference between .call() and .apply()?
- Entire content of a JavaScript source file in a function block?
- What is an immediately-invoked function expression?
- What is escape & unescape String functions in JavaScript?
- What is the instanceof operator in JavaScript?
- What Are RESTful (REpresentational State Transfer)Web Services?
- What is Unobtrusive JavaScript & Why it's Important?
- What Does JavaScript Void(0) Mean?
- What are JavaScript Cookies?
- Difference between Client side JavaScript and Server side JavaScript
- TypeError: document.getelementbyid(...) is null
- Uncaught TypeError: Cannot read property of undefined In JavaScript
- What's the difference between Null and Undefined?