Uncle Jim's Web Designs and Tutorials

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.

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>

Netscape accesses a layer with the following:

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

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")

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.