February 12, 2000 - Navigator's vs Explorer's DHTML

February 12, 2000 Navigator's vs Explorer's DHTML Tips: February 2000 Yehuda Shiran, Ph.D. Doc JavaScript

<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>
<FONT FACE="Arial,Helvetica,Verdana" SIZE="2">

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.

Learn more about Netscape Navigator's and Internet Explorer's different DHTML models in Column 27, Differences between Browser's Document Models .