The Browser Object Model (BOM)
- Individual browser windows
- the address bar
- HTML documents inside browser windows
- Elements such as forms and images within HTML documents
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:
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.
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.
<img src="out.jpg" onmouseover="this.src='over.jpg'" onmouseout="this.src='out.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:
In the above example, a custom function of our creation is called after the page loads. A custom function can be very simple:
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:
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:
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:
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
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: