Web Development Tutorials


The Browser Object Model

A Web page is made dynamic by applying JavaScript processing to the HTML elements on that page. Up to this point you probably have considered HTML tags simply as markup codes providing structure to page content and supplying mechanisms through which styling is applied to that content. Importantly, though, HTML tags are also software objects. That is, all HTML tags have properties and methods that can be programmed. As is the case with all software objects, properties refer to structural, visual, or content characteristics of the element; methods refer to actions the object can perform. HTML tags, then, are programmable through JavaScript processing routines, or scripts, that set their properties and activate their methods in order to make Web pages dynamic.

The browser object model (BOM) is a hierarchy of browser objects that are used to manipulate methods and properties associated with the Web browser itself. Objects that make up the BOM include the window object, navigator object, screen object, history, location object, and the document object. The Document Object consists of objects that are used to manipulate methods and properties of the document or Web page loaded in the browser window. The document object represents the Web page currently loaded in the browser window. Each HTML element or tag that makes up the document is also considered an object. It is not necessary to explicitly create any of the objects that make up the browser object model. The objects are automatically created when a Web browser opens a Web page.

The BOM Hierarchy

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. The window object along with its properties and methods are discussed in more detail in a later section.

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. The DOM will be discussed in more detailed in later tutorials.

Other objects of the browser object model include the navigator object, the screen object, that contains information about the visitor's screen, the history object, that is part of the window object and contains the URLs that have been visited by the user, and the location object that contains information about the current URL. Within the window object are document objects representing elements within the Web pages. The general hierarchy of the BOM is shown in the illustration below.

BOM Hierarchy

Figure 1-13. Components of the Browser Object Model (BOM)

Identifying BOM Objects

In order to program BOM objects, they must be identified to the scripts that manipulate their properties and methods. The following table summarizes several of the references used within scripts to identify common BOM objects. These and other reference notations are explained and illustrated throughout these tutorials.

Reference Object
window The main browser window
window.navigator Information about the browser itself
window.screen The user's screen
window.history URLs visited by a user
window.location The current URL
window.document (document) The document appearing in the main browser window
document.getElementById("id") An HTML element appearing in a document and identified by its assigned id value.

Figure 1-14. References to various BOM elements.

As you can see, script references to BOM objects use standard dotted notation to trace through the BOM hierarchy to identify particular objects. In some cases, there are short-cut notations that do not required the complete hierarchical path to an object. For example, window.document can be shorten to document.

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 largest part of client-side scripting, though, is in working with the properties and methods of HTML elements appearing on a Web page. In most cases, this involves detecting the style settings of HTML tags and changing these settings to change the appearance of, or to change the content enclosed by, these tags. In other cases, it involves calling up built-in methods to affect the behaviors of HTML tags. Being able to make proper script references to HTML elements is an important aspect of client-side scripting.

Referencing HTML Elements

A script can reference an HTML tag using its id. To reference the element, it must be assigned a unique id. This value is assigned by including an id attribute inside the tag as shown in Figure 1-15.

<div id="id">

Figure 1-15. Assigning an id to an HTML tag

The assigned id value must be unique within the document; that is, no two tags can have the same id. Also, the id value must be composed of alphabetic and numeric characters and must not contain blank spaces. Otherwise, you can assign any id to any tag.

Once an id is assigned, then the HTML object can be referenced in a script using the notation shown in Figure 1-16.


Figure 1-16. General script format to reference an HTML object.

Here, the id appearing inside the parentheses is the id value previously assigned to an HTML tag. This reference is used, then, to detect or apply a property setting to the element or to activate a method associated with it.

Learning BOM Components, Properties, and Methods

There are literally hundreds of property settings that can be applied to elements on a Web page; there are dozens of methods. In addition, there are properties and methods associated with the browser itself, with its windows, and with the documents appearing inside windows. A large part of learning how to dynamically manipulate browser objects, then, is in learning the numerous properties and methods available for the numerous BOM components, and in making proper reference to them in order to detect and set their property values and to activate their methods. The various properties and methods of the major BOM objects will be discussed in later sections of this tutorial.

TOP | NEXT: The JavaScript Language