<resources>
  spacerspacer

The Browser Object Model (BOM)

Browser Object Model: When JavaScript was first created in order for it to effectively interact with a browser, certain pieces and parts of the browser were identified for our access, for example:

  • Individual browser windows
  • the address bar
  • HTML documents inside browser windows
  • Elements such as forms and images within HTML documents

Once we can identify these browser parts and pieces we can respond to user actions such as mouse overs with JavaScript code. We'll use the term Browser Object Model to identify two things:

1) The larger object model which includes things not inside the HTML document, such as the window, the address bar, the frames and the navigator object

2) Inside the HTML document, the historically older object model, in which sets of related elements are available as built in arrays (forms, images, links) but other objects in the document can be reached via the name attribute of an element by walking the BOM tree down to the object. Here's an example:

window.document.myform.submit();

The above code would identify a form with the name attribute of "myform" and force it to submit data as entered currently in the form. The form that is associated would bear the name attribute thus:

<form name="myform" action="formhandler.php" method="post" />

Toward the bottom of this page you'll see an image that maps out the BOM objects in a tree like structure.

BOM vs DOM: There is a newer object model is called the Document Object Model (DOM) which loads the entire HTML document into memory so we can access pieces and parts. The DOM was created after the BOM and was meant to improve access to elements inside the document. We'll study the DOM in detail later.

When the original object model for JavaScript and browsers was created the DOM did not yet exist. At that time, what we're calling the BOM was the only object model for JavaScript. However with the creation of the DOM in 1998, all previous versions of DOM were deemed to be DOM level 0 (pre-DOM). The Browser Object Model and BOM are terms we'll use that are also used by very sharp folks like Nick Zakas.

BOM & DOM are APIs: Both the BOM and DOM above are examples of an Application Programmer's Interface or API. An API lets us access resources programmatically, in our case, the pieces and parts of the current browser.

Events: Events for people involve a time and a place. With browsers, events are the things users do with their mouse or keyboard while viewing our web pages. The event involves both the mouse or keyboard activity and the specific HTML element (or elements). For example a user can click on a link or mouse over an image.

Certain types of events are tracked by browsers and others are ignored. When a browser pays attention to an event, we can write code in response to the occurrence of that event.

Event Handlers: Event handlers allow us to trigger JavaScript code to occur in reaction to an event. The event handler is "hooked" (attached) to an HTML element frequently as an attribute in the involved element. An attribute shows up as a name/value pair inside an element, for example class="mybold". The difference is the attributes we'll use are designed to identify the event handlers for an element.

An example is the onmouseover attribute/event handler of an image. We can place JavaScript code directly into "value" (quoted) portion of the attribute. Below we have created a simple "mouse over" effect wherein an image is swapped between two states, one that reacts to a mouse over event, the other that reacts to mouse out event, in which the user moves the mouse away from the element. The two in combination create the mouse over effect:

<img src="out.jpg" onmouseover="this.src='over.jpg'" onmouseout="this.src='out.jpg'" />

In the example above both the onmouseover and onmouseout event handlers have a bit of JavaScript code inside of them. In the JS code the keyword this indicates the current element. Note the dot syntax meaning the period is used to connect the keyword this to the src attribute. The equals sign assigns to a new image in reaction to the event:

this.src='over.jpg'

There are also single quotes around the name of the image because the data inside is a string. We don't want to use double quotes here because the attribute requires double quotes for the page to validate.

Here's an example: Mouse over using this keyword

Name Attribute: The BOM uses the name attribute to uniquely identify elements. Below is an example where we walk the BOM tree from the current document down to an image named myImage to do the rollover effect from an a tag instead of from the image itself:

<a href="mypage.htm" onmouseover="document.myImage.src='images/on.gif'"
onmouseout="document.myImage.src='images/off.gif'"><img src="images/on.gif" name="myImage"><a/>

Mouse over using name attribute

Since the keyword window is omitted in accessing the element, the current window is assumed. The keyword document however is usually required.

Triggering Custom Functions via Event Handlers: If we want to create more complex code we can create our own functions and then trigger them by identifying them inside the value section of an event handling attribute:

<img src="mypic.jpg" onmouseover="rollOn()"; ?>

Above the event handler onmouseover wires the mouse over event to the rollOn() function that we must create.

Frequently Used Event Handlers: There are specific event handlers that are particularly useful. None more so than the load event of the body element. The load event fires after the entire page has been loaded and all elements exist in memory. This is the one time we can interact with the page elements while they exist and before the user can click on elements. It is accessed by the onload event handler as an attribute of the body element:

<body onload="init();">

In the above example, a custom function of our creation is called after the page loads. A custom function can be very simple:

function init()
{

alert("I'm Init!");

}

The function we have created above is trivial, but when placed in a script tag anywhere on the page, the function will be called after the page loads and will pop a modal window when the page is done loading. Later we'll use a function like this to initialize our scripts to "set the stage" for what work needs to be done via JavaScript. init example

window.onload: The onload event of the body element is so important that it has an alias accessed by the window and not by the body element at all. We can assign a custom function to occur when the window is done loading the HTML document, but the syntax is a bit different:

window.onload=init;

In the above example there is a reference to our custom function named init(), but here it's identified without any parenthesis or quotation marks. Since the command above can be called separate from the body element, we can start to access pieces and parts of documents without using an event handling attribute. Using this technique is called Unobtrusive JavaScript. Here's an example: window.onload init example

Object Properties: The BOM provides access to it's pieces and parts via properties that can sometimes be changed via code. A property can be thought of as a quality, for example a color or a font style. View the following example:

document.bgColor='red';

In the above example we use the built in bgColor property to change the background color of the entire HTML document: bgColor example

Look closely at the code for the above example. See how a single function named changeColor() is used, but a string of text (red, blue, etc.) is passed into the function, making the function flexible.

Here's another example that allows us to see the "name" of the current browser, as provided by the browser:

alert(navigator.appName);

The appName property of the navigator object supposedly provides the name of the current browser. Here's an example: appName Property example

When viewed with many browsers the string returned is "Netscape". Knowing something about the history of browsers, why might this be? Here's a link to an image showing the Browser Family Tree

Object Methods: Objects in the BOM also provide methods that allow us to perform tasks via JavaScript. We've seen one of these already:

document.myform.submit();

In the above, the form named myform is triggered into submitting it's data! We can write to the page using the document object as well, during page load:

document.write('<div class="myclass">This is a div!</div>');

The above code would write HTML in the exact location where the command exists. This is why JS is not always inside the head tag, as we don't want to write a <div> inside the <head>!

Map of the Browser Object Model: Below is an image that identifies most of the pieces and parts of the BOM. Note the tree like structure branching from the window object (below called "The Current Window"):

All of the items with square brackets showing (images, applets, forms, links, etc.) are sets of objects that are grouped into an array. Note the document object refers to the HTML document. This model for reaching the document is separate from the DOM which was created to improve upon this model. The newer DOM and the older BOM superimpose one upon the other at the level of the document object above.

Object Reference: Below is a link to an Object Reference which identifies many common BOM objects, related events to which we can program and properties and methods of many of the objects. Please study this as we move forward:

Object Reference

   
Print this Page Back To Top

2000- 2014 newMANIC INC, All rights reserved