Network: Find your way with a roadmap

Web Design: DOM is becoming the definitive concept for dealing with Web pages needs

DYNAMIC HTML gives Web designers the ability to create pages that can interact and change with a visitor as they use a site. A few months ago, I introduced DHTML and revealed some of its dark secrets (http://www. independent.co.uk/net/980706ne/story6.html). DHTML relies on Cascading Style Sheets (http://www. independent.co.uk/net/980407ne/story8.html) to get its power, but as powerful as Cascading Style Sheets are, they are not really dynamic per se.

They give us control over how the document looks when it is first put on to the screen, but what about after that?

Web pages created with Cascading Style Sheets can have their properties changed while on the screen (that is, dynamically) - through the use of a scripting language and the Document Object Model (DOM). Since JavaScript (JScript in Internet Explorer) is available almost universally, that is the scripting language most people use.

However, CSS can be affected by any scripting language that your particular browser can handle - VBScript in Internet Explorer, for instance.

The ability to change a Web page dynamically with a scripting language is made possible by the DOM, which can connect any element on the screen to a JavaScript function. The DOM is quickly becoming the definitive concept for dealing with Web pages, second only to HTML and JavaScript itself.

The bad news - and you knew it would not be straightforward - is that Navigator and Internet Explorer have implemented their DOMs differently.

The DOM is the road map through which you can locate any element in your HTML document and use a script, such as JavaScript, to change the element's properties. A DOM can address any element on the screen that is either a replaced element, such as an image with a name, or any element that is identified by an ID, such as a paragraph of text that include the ID attribute.

The key is that the HTML element must have a unique identity (ie, name) on the screen.

When you write a letter to someone, you address the envelope describing the person, the house number, street and city for whom the letter is intended.

Any elements on the screen, at least any that are enclosed within HTML tags, can be identified using a NAME or an ID attribute to give it its own unique "address", as if it were on a city map. The DOM works like a map of your web page, describing a path starting with the window itself and then the HTML document down to the various elements on the Web page.

For instance, the DOM for an image called button1 would be: window.document.images.button1.

This tells the browser that the document contains an image called button1. You can use this path to allow a JavaScript function to send that element a message, such as what image it should be displaying. At least that is the grand idea.

Unfortunately, because the DHTML browsers - Netscape Navigator 4 and Internet Explorer 4 - don't agree on the same map to get to elements defined using CSS, they have different formats for creating addresses to elements on a Web page. Thus we have yet another cross-browser problem to contend with when dealing with DHTML.

Netscape uses the following format to access elements defined using CSS: document. elementName.styleProperty while Internet Explorer uses the following format to get to the same place: document.all.elementName.style.styleProperty, where "elementName" refers to the name given to the HTML element and "styleProperty" is the CSS style you want to change for that specific element.

The World wide Web Consortium (http://www.w3c.org) is working on a DOM standard, and both Netscape and Microsoft have agreed to adhere to that standard. This will probably more closely resemble the format currently used in Internet Explorer, but that does not really help us right now.

The good news is that, until then, we can use JavaScript to make sure that both browsers are "reading off the same page". I will look at ways to create this cross-browser DOM in future columns.

Jason Cranford Teague's book 'The Visual Quickstart Guide to DHTML' has just been published by Peach Pit Press.

E-mail your comments or queries to Jason at indy_webdesign @mindspring.com