Dynamic HTML | HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

< Day Day Up >

The previous examples have shown script interaction with HTML elements in the traditional fashion, manipulating form elements. However, with the rise of the 4. x generation of browsers, a new concept called Dynamic HTML or DHTML was introduced. DHTML describes the ability to dynamically manipulate the page elements, potentially changing the document's structure in a significant way. In its most obvious form, DHTML is an HTML document that displays dynamic characteristics such as movement or the showing or hiding of page content. These sophisticated features are made possible through the intersection of HTML, CSS, and JavaScript. So in some sense, the idea of DHTML can be summarized in the formula

DHTML = HTML + CSS + JavaScript

In the case of DHTML, we generally assume that all page content from form fields to bold tags can be modified. For example, consider if you had a paragraph in HTML like so:

  <p id="para1">  This is a test  </p>

It could be referenced under Internet Explorer 4 or later DHTML style object mode using window.document.all['para1'], document.all['para1'] or simply para1 . The simple example that follows moves the paragraph around the page by changing the align attribute of the paragraph tag through its corresponding align property:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  The Dynamic Paragraph: DHTML Style  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   </head>   <body>   <h1 align="center">  The Dynamic Paragraph  </h1>   <hr />   <p id="para1">  I am a dynamic paragraph. Watch me dance!  </p>   <hr />   <form action="#">   <input type="button" value="Right" onclick="para1.align='right';" />   <input type="button" value="Left" onclick="para1.align='left';" />   <input type="button" value="Center" onclick="para1.align='center';" />   </form>   </body>   </html>

We can even consider modifying the content. For example, consider adding the button here,

 <input type="button" value="Change" onclick="para1.innerText='Changed!';" />

which modifies the actual contents of the paragraph tag.

While the Dynamic HTML approach is quite powerful, it suffers from extreme compatibility problems. Other browsers may not expose all the same objects and even when they do, their syntax is not always the same, which can cause developers great annoyance.

< Day Day Up >