JavaScript Browser Object Model (BOM)

The Browser Object Model creates a tree-like hierarchy of objects, many of which provide properties and methods. The browser itself is represented by one object, called the window object.

The window object is the parent of several child objects:

  • document
  • frames
  • history
  • location
  • navigator
  • screen
  • self/window/parent

The document child of the window object is special because it has several child and even grandchild objects that provide access to all HTML elements within a page.

The window object is a global object that represents the currently open window in the browser. The window object has several properties, methods, and child objects. Because the window object is a global object, you don't need to preface its properties and methods with window. Instead, you can call them directly.

Direct descendants of the window object don't require the window prefix, but when you deal with objects beyond the window object's direct descendants, you need to precede them with the window object name. For example, the document object is a direct descendant of the window object and therefore doesn’t need the window prefix, but descendants of the document object do need it.

Properties of Window Object

  • closed - Set to true when the window has been closed
  • defaultStatus - Used to set the text that appears by default in the status bar of a browser
  • name - The name of the window as set when the window is first opened
  • opener - A reference to the window that created the window
  • parent - Frequently used with frames to refer to the window that created a particular window or is one level up from the frame
  • status - Frequently used to set the text in the status bar when a visitor hovers over an element such as a link
  • top - Refers to the highest or topmost parent window

Methods of Window Object

  • addEventListener() - Cross-browser method to add event handlers.
  • blur() - Changes the focus of keyboard input away from the browser window.
  • focus() - Changes the focus of keyboard input to the browser window.
  • close() - Closes the browser window.
  • removeEventListener() - Cross-browser event handler removal method.
  • open() - Opens a window
  • print() - Causes the browser's print function to be invoked; behaves just as though someone clicked Print in the browser.

Some methods of the window object deal with moving and resizing the window.

  • moveBy() - Used to move the window to a relative location
  • moveTo() - Used to move the window to a specific location
  • resizeBy() - Used to change the size of the window by a relative amount
  • resizeTo() - Used to change the size of the window to a certain size

The window object methods related to timers are:

  • clearInterval()
  • clearTimeout()
  • setInterval()
  • setTimeout()

Getting information about screen

The screen object provides a way to obtain information about the visitor's screen. You might need this information to determine which images to display or how large the page can be. The available properties of the screen object:

  • availHeight
  • availWidth
  • colorDepth
  • height
  • width

The availHeight and availWidth properties return the available height and width of the screen minus the space used by other controls, such as the taskbar in Microsoft Windows. The height and width properties return the gross height and width.

For example,

alert("Available Height: " + screen.availHeight);
alert("Total Height: " + screen.height);
alert("Available Width: " + screen.availWidth);
alert("Total Width: " + screen.width);

Using navigator object

The navigator object provides several properties that assist in the detection of various elements of the visitor's browser and environment. One of the most popular operations JavaScript can perform is detecting which browser the visitor is using.

Example,

var body = document.getElementsByTagName("body")[0];
for (var prop in navigator) {
var elem = document.createElement("p");
var text = document.createTextNode(prop + ": " + navigator[prop]);
elem.appendChild(text);
body.appendChild(elem);
}

The code employs a function that uses the document object to create Hypertext Markup Language (HTML) elements within the web page. A for loop is used to iterate through each of the properties presented by the navigator object.

The location object

The location object gives you access to the currently loaded Uniform Resource Identifier (URI), including any information about the query string, the protocol in use, and other related components.

Example,

var body = document.getElementsByTagName("body")[0];
for (var prop in location) {
var elem = document.createElement("p");
var text = document.createTextNode(prop + ": " + location[prop]);
elem.appendChild(text);
body.appendChild(elem);
}

The history object

The history object provides ways to move forward and backward through the visitor's browsing history. However, for security reasons, JavaScript cannot access the URIs for sites that the browser visits. You can use the back(), forward(), and go() methods. 

The back() and forward() move one page backward and forward, respectively. The go() method moves to the index value specified as the argument. For example, the code for moving backward and forward that can be adapted as needed:

<!doctype html>
<html>
<head>
<title>History</title>
<script type="text/javascript">
function moveBack() {
history.back();
return false;
}
function moveForward() {
history.forward();
return false;
}
</script>
</head>
<body>
<p><a href="#" onclick="return moveBack();">Click to go back</a></p>
<p><a href="#" onclick="return moveForward();">Click to go forward</a></p>
</body>
</html>

This code uses an inline event handler (onclick), which is not recommended for use in unobtrusive JavaScript, because the event handler inserts behavior in the page markup.