Inside Technique : DHTMLLib 2.0 : Element Objects

Each object exposed by the document's collections represents an HTML element. These objects expose properties representing the HTML attributes. For example, the href property on a link represents the HTML href attribute:

<A HREF="http://www.insideDHTML.com/">Home</A>

<SCRIPT>
  alert(document.links[0].href)
  // returns "http://www.insideDHTML.com/"
</SCRIPT>

In Internet Explorer, every HTML attribute is represented as a property. Netscape, on the otherhand, exposes a predefined set of properties and does not represent every attribute defined by HTML. Therefore, when trying to write cross-browser scripts, you must limit yourself to the set defined by Netscape. To further complicate matters, Internet Explorer exposes almost every attribute read-write (ID and POSITION are basically the only read-only attribute. Position is read-write in Internet Explorer 5.0). Any changes are reflected in the document. This is essentially why Internet Explorer calls its model Dynamic HTML. You can change any HTML attribute or CSS style and have it immediately reflected in the document.

Netscape Navigator, on the otherhand, exposes most HTML attributes read-only. The only HTML attributes that are read-write are those that do not effect the layout of the page. The exception being elements that are positioned. For those elements you can change the position of the element, and for absolutely positioned elements, the contents. This is because changing the position of an element does not cause the document to reflow.

So what exactly is DHTML then? To briefly summarize: In Internet Explorer, it refers to the ability to change anything about your document. In Netscape Navigator, it is more limiting and refers mostly to the ability to change the position of elements.

One component of Dynamic HTML is Dynamic Styles. This is the ability to change the appearance of the document. In Internet Explorer styles can be changed at any point even after the page is loaded and the new style is rendered. In Netscape, beyond repositioning elements, you can only change the appearance of elements before the page starts loading.

Netscape Navigator ability to change style information before the page is rendered is done using JavaScript Accessible Style Sheets (JASS). However, once the element is rendered you cannot go back and change its appearance. Therefore, JASS can be viewed as an alternative way of writing a style sheet into the document using document.write().

For positioned elements Netscape Navigator lets you change the top, left, clipping width and height (explained later), background color or image, and replace the contents. They expose these as properties directly on each layer object. When examining the layer object it is important to recognize each layer object is not a DIV or SPAN element that through CSS is positioned, but rather is considered by Navigator's Object Model to be an object containing a psuedo-document. This subtle distinction marks one of the differences between Navigator and Explorer and is also the root of many cross-browser problems (remember the form issue from the previous page).

In Internet Explorer, you can change the style information on any element before it is rendered by dynamically manipulating the global style sheet object model, or after its rendered by also manipulating the global stylesheet object model or by setting any HTML or CSS attribute in-line on the element. To manipulate the global stylesheet you can use the styleSheets collection. This gives you a collection of styleSheets created by LINK or STYLE elements. Through each styleSheet in this collection you can access the individual rules through the rules collection. While very useful for manipulating the global appearance of the document, most dynamic styles are performed through the in-line style directly on each element.

The inline style is manipulated through the style object on every element. The style property corresponds to the HTML style attribute. Through the style object, you can access all the style properties. These properties accurately represent any in-line styles on the element. By following this approach, Internet Explorer is separating the style from the element consistent with the HTML and CSS specifications. On any element you can use the style property to change any CSS property and have it represented in the document.

Positioned elements are just that, elements that are positioned with a few limitations. The behavior of the element nor its contents change when it is positioned. Instead, the element is just rendered in a new place. The primary limitation in Internet Explorer 4.x (which is removed in 5.0) is it does not allow every element to be absolutely positioned (most elements can be relatively positioned). Instead, you can only absolutely position DIV, SPAN, TABLE, IMG, IFRAME, and form elements. To manipulate any of the position information on these elements you use the style object. The style object exposes the CSS properties representing the size and position.

Examining the features supported by both Internet Explorer and Netscape Navigator there is a clear overlap in functionality for positioned elements. This is where our cross-browser scripting journey begins. Next we discuss some of the finer points of positioning elements in each browser.

[Scripting CSS-P]

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.