DHTML, or Dynamic HTML, is not a standalone technology. Instead, it is a fusion of three existing technologies, namely HTML, CSS, and JavaScript, all held together by the Document Object Model (DOM). This article will provide a brief overview of these components and how they interact to create dynamic web content.
The interaction between these components is facilitated by the Document Object Model (DOM), which exposes the attributes of HTML and CSS to JavaScript control. However, different browsers have slightly different versions of the DOM, which can lead to variations in how HTML properties are accessed and displayed.
JavaScript is responsible for locating HTML elements on a page and changing their properties. To illustrate this, consider how you would find a name in a phone book. You would start with the state (e.g., Washington), then move to the city (e.g., Seattle), then to the listings (e.g., 'j'), and finally to the name (e.g., Jessica). In JavaScript, this hierarchy would be represented as washington.seattle.j.jessica.
This hierarchy can be extended to include additional information. For example, to access Jessica's address or phone number, you would use washington.seattle.j.jessica.address or washington.seattle.j.jessica.phone, respectively.
This metaphor can be applied to a DHTML document. For example, consider a <DIV> layer named 'myLayer' with various style attributes and containing the text 'myText'. The visibility attribute of this layer is initially set to 'hidden'.
In Netscape, the address to the 'myLayer' DIV layer is document.myLayer. In Explorer, it is document.all.myLayer.style. The W3C way of identifying the address is document.getElementById('myLayer').style.
To access the visibility property under 'myLayer', you would use document.myLayer.visibility in Netscape, document.all.myLayer.style.visibility in Explorer, and document.getElementById('myLayer').style.visibility in W3C.
To change the visibility of this layer, you would assign a value to your JavaScript address. For example, document.myLayer.visibility = "visible"; in Netscape, document.all.myLayer.style.visibility = "visible"; in Explorer, and document.getElementById('myLayer').style.visibility="visible"; in W3C.
This is a basic example of how DHTML works. There are hundreds of attribute properties for text, images, documents, and windows, and not all of these properties are supported in every browser. However, by sticking to the common properties used by both browsers, you can simplify the process. For a more comprehensive guide to DHTML properties and their cross-browser compatibilities, consider checking out "Dynamic HTML - The Definitive Guide" by Danny Goodman (O'Reilly Books) [^1^].
[^1^]: Dynamic HTML - The Definitive Guide
