A Brief Overview of Browser Object Models

[ LiB ]

A Brief Overview of Browser Object Models

In an effort to help bring stability to Web development, a group known as the World Wide Web Consortium developed a browser object standard called the Document Object Model (DOM). This model defines every element on an HTML page and provides the capability to access it. Both Microsoft and Netscape are working toward fully integrated support for the DOM in their browsers. As a result, the most current versions of both Internet Explorer and Netscape Communicator are very consistent in their support for browser objects, making your HTML pages look pretty much the same regardless of which browser is used to view them. This is especially good news for JavaScript programmers because it means that you can pretty much count on the same collection of objects being available.

NOTE

There is no way that this book can completely cover all the ins and outs of the DOM. If you would like to learn more about it, visit www.w3c.org/DOM.

Supporting Older Browser Object Models

As I have already suggested, older versions of both Internet Explorer and Netscape Communicator supported their own particular object models, whereas the most current versions of both browsers provide backward support for old browser object models while simultaneously incorporating support for the DOM.

Because so many people are still surfing the Internet using older browsers, it is important to understand how the older browsers support object access. The uppermost object supported by older browser object models is the window object. This object provides access to a number of lower-level or child objects, as listed below.

• document object. Provides the capability to access and manipulate the currently loaded HTML page.

• frames collection. Provides access to an indexed list of the frames defined in the browser window.

• history object. Provides methods that can be used to navigate through the document object's history list (e.g. to Web pages previously visited).

• location object. Provides access to information about the current URL as well as the capability to load a new URL.

• navigator object. Provides access to information about the browser being used to access the HTML page.

Figure 3.3 shows the relationship of these objects to one another.

Figure 3.3. The window object provides access to multiple child objects.

Of all these objects, the one that you will use the most is the document object. The document object provides access to a large number of additional objects and collections, as depicted in Figure 3.4.

Figure 3.4. Commonly used objects and collections belonging to the document object

To support older browsers, you must refer to objects by name . For example, the following statement refers to the document object's write() method.

 document.write("Welcome to my Web page!"); 

As you work your way through the rest of today, I'll provide you with examples that further demonstrate how to reference objects by name.

Working with the Document Object Model

The latest versions of Internet Explorer and Netscape Communicator support the DOM. Therefore, you have two different ways of accessing browser objects. First, you can access them by name as previously demonstrated. The advantage of using this option is that it helps make your HTML pages and JavaScripts backwardly compatible with older browsers. The disadvantage of this option is that it provides a lot less flexibility when compared to using properties provided by the DOM.

Table 3.1 provides a complete listing of DOM properties that you can use within your JavaScripts in order to access browser objects. These properties provide comprehensive control over all the content located on an HTML page by providing you with the capability to travel up and down the tree without having to hard code in references to specific HTML elements (e.g. via the NAME attribute).

Table 3.1. DOM PROPERTIES

Property	Description
firstChild	The first child node belonging to an object
lastChild	An object's last child node
childNodes	A collection (e.g. array) of child objects belonging to an object
parentNode	An object's parent object
nextSibling	The child node following the previous child node in the tree
prevSibling	The child node that comes before the current child node
nodeName	The name assigned to an object's HTML tag
nodeType	Identifies the type of HTML element (tag, attribute, or text) associated with the object
nodeValue	Retrieves the value assigned to a text node
data	Retrieves the value for the specified text node
specified	Determines whether an attribute has been specified
attributes	A collection (e.g. array) made up of all an object's attributes

To demonstrate how to use the DOM properties listed in Table 3.1 to access and manipulate HTML content, take a look at the following example.

 <HTML>   <HEAD>     <TITLE>Script 3.2 - DOM Navigation and Access Example</TITLE>   </HEAD>    <BODY ID="bodyTag">     <P ID="Tag1" Name="helloTag">Hello.</P>     <p ID="Tag2" NAME="welcomeMsg"> Welcome to my Web site.</P>   </BODY> </HTML> 

Graphically, this script can be represented as shown in Figure 3.5. The document object sits at the root of the tree and has just one child object, documentElement . documentElement represents the HTML page's opening <HTML> tag.

Figure 3.5. An illustration of the HTML page's layout from a DOM standpoint

Now modify the previous script so that it looks exactly like the example shown below.

 <HTML>   <HEAD>     <TITLE>Script 3.3 - DOM Navigation and Access Example </TITLE>    </HEAD>   <BODY ID="bodyTag">     <P ID="Tag1" NAME="helloTag">Hello.</P>     <P ID="Tag2" NAME="welcomeMsg"> Welcome to my Web site.</P>     <SCRIPT LANGUAGE="JavaScript" TYPE="Text/JavaScript">     <!-- Start hiding JavaScript statements       window.alert("The ID assigned to the 1st HTML tag is: " +         document.documentElement.firstChild.tagName);       window.alert("The ID assigned to the 2nd HTML tag is: " +         document.documentElement.lastChild.tagName);       window.alert("The ID assigned to the child of the 1st HTML tag is: " + document.documentElement.firstChild.firstChild.tagName);       window.alert("Click on OK to dynamically modify the value of Tag2"); document.getElementById("Tag2").firstChild.nodeValue="Welcome to " +         "my new and improved Web site.";     // End hiding JavaScript statements -->     </SCRIPT>   </BODY> </HTML> 

The first JavaScript statement displays the tag name of the first HTML tag that exists under the document object (e.g. the <HEAD> tag), as shown in Figure 3.6.

Figure 3.6. Using DOM properties to navigate and reference different elements on an HTML page

Take a look at the tree hierarchy shown in Figure 3.5 and compare it to the components that make up this statement. Next , the JavaScript uses the lastChild property to reference the <BODY> tag. Then the script references the <TITLE> tag, which happens to be the first tag located under the first tag in the script. The next statement displays a message stating that the script is about to rewrite the value assigned to the HTML page's second tag. Finally, the last statement in the script, shown below, rewrites a portion of the text displayed on the screen. It accomplishes this task by using the GetElementById() method to establish a reference to Tag2 . This establishes a reference to the HTML page's second <P> tag. The statement then references the nodeValue of the tag's firstChild (e.g. the tag's content) and assigns it a new value.

 document.getElementById("Tag2").firstChild.nodeValue="Welcome to " +          "my new and improved Web site."; 

Figure 3.7 shows how the HTML page looks after its content has been changed dynamically.

Figure 3.7. Dynamically modifying HTML content

The DOM provides the capability to reference any element located on an HTML page. It provides the capability to navigate the HTML page without having to reference hard coded tag names and to modify content dynamically. However, the price for this flexibility is complexity.

Unfortunately, the DOM is not supported by versions of the Internet Explorer browser prior to version 5, nor is it supported by versions of Netscape Communicator prior to version 6. Therefore, many visitors to your Web pages may be using browsers that do not support it.

[ LiB ]