Uncle Jim's Web Designs and Tutorials

This is part three of a series on Dynamic HTML


The Document Object Model

To become proficient in DHTML, you must familiarize yourself with what's called the DOM or Document Object Model. DOM is simply a framework containing objects displayed by a browser, such as forms, images, layers, etc. Developers can employ this hierarchical structure to access and manipulate what appears onscreen.

DHTML DOM Objects

With the help of JavaScript, you can access and manipulate all of the HTML DOM objects.
Here is a list of DOM objects and their collections, properties, methods and events.

ObjectDescription
AnchorRepresents an HTML a element (a hyperlink)
AppletRepresents an HTML applet element. The applet element is used to place executable content on a page
AreaRepresents an area of an image-map. An image-map is an image with clickable regions
BaseRepresents an HTML base element
BasefontRepresents an HTML basefont element
BodyRepresents the body of the document (the HTML body)
ButtonRepresents a push button on an HTML form. For each instance of an HTML <input type="button"> tag on an HTML form, a Button object is created
CheckboxRepresents a checkbox on an HTML form. For each instance of an HTML <input type="checkbox"> tag on an HTML form, a Checkbox object is created
DocumentUsed to access all elements in a page
EventRepresents the state of an event, such as the element in which the event occurred, the state of the keyboard keys, the location of the mouse, and the state of the mouse buttons
FileUploadFor each instance of an HTML <input type="file"> tag on a form, a FileUpload object is created
FormForms are used to prompt users for input. Represents an HTML form element
FrameRepresents an HTML frame
FramesetRepresents an HTML frameset
HiddenRepresents a hidden field on an HTML form. For each instance of an HTML <input type="hidden"> tag on a form, a Hidden object is created
HistoryA predefined object which can be accessed through the history property of the Window object. This object consists of an array of URLs. These URLs are all the URLs the user has visited within a browser window
IframeRepresents an HTML inline-frame
ImageRepresents an HTML img element
LinkRepresents an HTML link element. The link element can only be used within the <head> tag
LocationContains information about the current URL
MetaRepresents an HTML meta element
NavigatorContains information about the client browser
OptionRepresents an option in a selection list on an HTML form. For each instance of an HTML <option> tag in a selection list on a form, an Option object is created
PasswordRepresents a password field on an HTML form. For each instance of an HTML <input type="password"> tag on a form, a Password object is created
RadioRepresents radio buttons on an HTML form. For each instance of an HTML <input type="radio"> tag on a form, a Radio object is created
ResetRepresents a reset button on an HTML form. For each instance of an HTML <input type="reset"> tag on a form, a Reset object is created
ScreenAutomatically created by the JavaScript runtime engine and it contains information about the client's display screen
SelectRepresents a selection list on an HTML form. For each instance of an HTML <select> tag on a form, a Select object is created
StyleRepresents an individual style statement. This object can be accessed from the document or from the elements to which that style is applied
SubmitRepresents a submit button on an HTML form. For each instance of an HTML <input type="submit"> tag on a form, a Submit object is created
TableRepresents an HTML table element
TableDataRepresents an HTML td element
TableHeaderRepresents an HTML th element
TableRowRepresents an HTML tr element
TextRepresents a text field on an HTML form. For each instance of an HTML <input type="text"> tag on a form, a Text object is created
TextareaRepresents an HTML textarea element
WindowCorresponds to the browser window. A Window object is created automatically with every instance of a <body> or <frameset> tag

Why can't we all just get along. . .

The effect of browser wars

Browser incompatibility is the main cause for the necessity to have different methods to access layers. When Netscape Navigator 4 was introduced, it was the first "DHTML browser." Unfortunately, it was released before the World Wide Web Consortium could issue recommended standards for the DOM.

Previous problems with coding DHTML technologies occurred because the browser manufacturers created their own non-standardized, proprietary features specific to the use of that particular browser. This has resulted in Web pages that look fine on one browser, but not with other browsers. Microsoft Internet Explorer 4, though not perfect used a more advanced DOM where every HTML element is programmable. Since then, we have seen the introduction of W3C standards, Internet Explorer 5 and 6, Netscape 6 and 7, and FireFox. DHTML has become a much more powerful tool and, more importantly, a standard.

In developing web pages or web sites, it is imperative that you check your pages and code with multiple browsers. The good news is, the major browsers now support the document object model (DOM) using the window as the object. This allows you to write javascript code addressing the document object model objects. Let's look at an example of this using absolutely positioned layers.

<div id="myLayer1" style="position:absolute;top:100;left:150;z-index:3">    </div>

Each browser accesses this object differently. Note that layerID stands for the ID assigned to that particular layer. In our example layer, the layerID would be "myLayer1".

Netscape accesses a layer with the following:

document.layers[i] or document.layers[layerID] or document.layers.layerID or document.layerID

To access our example layer, the code would be document.layers["myLayer1"].

Internet Explorer and FireFox use document.all[layerID] or document.all(layerID) or document.all.layerID or layerID. For purposes of this tutorial, the first method will be used. To access the example layer, the code would be document.all["myLayer1"].

W3C DOM (Internet Explorer 5 and Netscape 6)

The W3C DOM recommendation is utilized by the latest versions of IE, NN, and FireFox as follows:

document.getElementById("myLayer1")
By using the above method, you can detect which browser a viewer is using, as in the below code example:
if(document.getElementById){
      // Netscape 6 and IE 5 code goes here
}else if(document.all){
      // IE 4 code goes here
}else if(document.layers){
      //Netscape 4 code goes here
}

Backward compatability

Backward-compatible code simply means it can be used by both document.getElementById and document.all to access a page's elements.

Next, we discuss accessing elements using using Javascript and CSS properties.