Introducing DOCJSLIB, Part I: Inconsistencies between Browsers - Doc JavaScript

Differences between Browser's Document Models

Netscape Navigator's document model is much different from Internet Explorer's. We want to briefly review the differences between the two browsers, as a background and a motivation for DOCJSLIB. As JavaScript is an Object Oriented Language, a DHTML object consists of properties, methods, and event handlers. We will focus here on the differences in property assignment and referencing as well as event handler support. In no way should this page be considered as an exhaustive one.

The first complication is that the basic document model is different between the browsers. In Netscape Navigator, all elements are descendents of the top-level document object. In Internet Explorer, though, there is an intermediate level between the top-level document object and the DHTML elements of the page. Let's take the DIV tag as an example for a DHTML element that exists in both Netscape Navigator and Internet Explorer:

<DIV NAME="divName" ID="divID">...</DIV>

A reference to this DIV element in Netscape Navigator is as follows:

document.divID

while an Internet Explorer's reference to it will be as follows:

document.all.divID

The second complication stems from the way properties of DHTML elements are referenced. In Netscape Navigator, the properties are immediate descendents of the DHTML object. In Internet Explorer, though, the properties are descendents of the style object, which is a descendent of the DHTML object. Continuing our previous DIV example, its left property, for example, is referenced in Netscape Navigator as follows:

document.divID.left

while it is referenced in Internet Explorer as:

document.all.divID.style.left

The third complication is that properties with matching names do not behave exactly the same in both browsers. The classic example here is the DHTML's left and top properties. In Netscape Navigator, they return a numeric value that represent the distance of the DHTML element from the left and top sides of the window, respectively. In Internet Explorer, though, these properties return a string that includes both the numeric value of the distance, as well as the measuring units (px for pixels, for example). Obviously, you cannot use this string for mathematical operations, such as addition and subtraction. Luckily, Internet Explorer provides two other properties, pixelLeft and PixelTop, that return exactly what the left and top properties return in Netscape Navigator. Summarizing, there are cases of different properties that return the same values, and there are cases of exact same properties that return different values.

The fourth complication is the way these browsers reference HTML elements inside the DHTML elements. In Netscape Navigator, you have to access the document object which is a descendent of the DHTML element:

document.divID.document

and then reference descendent HTML elements by their NAME attribute value. Let's position an IMG element inside our previous DIV element:

<DIV NAME="imgName" ID="imgID">
<IMG NAME="imgName" ID="imgId">
</DIV>

The IMG element's reference in Netscape Navigator is:

document.divID.document.imgName

and the IMG's SRC attribute is referenced in JavaScript as:

document.divID.document.imgName.src

The situation in Internet Explorer is much simpler. The IMG element can be referenced directly from documental object, and its SRC attribute is referenced in JavaScript as:

document.all.imgID.src

The fifth complication is that some DHTML elements do not support the same event handlers. The DIV element in Internet Explorer supports the onClick event handler, while the DIV element in Netscape Navigator does not. The IMG element behaves the same way. A variation on this complication is that there are DHTML elements that are supported by one browser and not the other. For example, the LAYER element, for example, is supported only by the Netscape Navigator.

Created: October 12, 1998
Revised: October 12, 1998

URL: https://www.webreference.com/js/column27/differences.html