DHTML = Dynamic HTML
Technically, there is no such things as DHTML!
DHTML is the combination of technologies that enable developers to create interactive, client-based documents. No one standard defines DHTML, rather a collection of standards (e.g., CSS) and technologies (e.g., JavaScript).
DHTML allows web developers to exercise direct, programmable access to the individual components of web documents, from individual elements (e.g., tags) to containers (forms, tables, documents).
DHTML access, combined with the event model, allows the browser to react to user input, execute scripts on the fly, and display the new content without downloading additional documents from a server. The DHTML DOM puts sophisticated interactivity within easy reach of the average HTML author.
The Elements of DHTML
 | HTML 4.0 including Cascading Style Sheets (CSS), and the Document Object Model (DOM). Creating dynamic HTML documents would not be possible without these two additions. |
| Cascading Style Sheets (CSS) - the style and layout model for HTML documents. Creating dynamic HTML documents would not be possible without CSS. |
| Document Object Model - a document content model for HTML documents. |
| JavaScript (and VBScript) |
DOM (Document Object Model).
| The DOM is a hierarchy of relationships between objects in the browser environment. |
| The DOM is defined at... http://www.w3.org/DOM/ |
| The DOM is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page (from W3C). |
What Does the DOM Do?
The DOM enables you to "program" the behavior and operation of a web document, specifically:
| Change the appearance, content, or behavior of HTML tags - typically by modifying the value of tag attributes. For example, changing an image by changing the value of a src attribute in an image. |
| Stylesheets take advantage of the DOM by allowing tag attribute behavior to be defined by a variety of methods (inline, document level, and or external style sheets). |
| Be able to respond to user triggered or generated events such as loading a web page, submitting a web form, clicking a button, pressing a key, or detecting mouse movements and then responding to these events. |
| The "glue" for the DOM is a script language environment: JavaScript in Netscape and Internet Explorer, and VBScript in Internet Explorer. |
| Scripting languages allow the developer to "program" web documents to respond to a variety of events. |
There are significant differences in the physical layout of the DOM between Internet Explorer and Netscape. The following shows the parent-child relationship of document objects (and the differences between Internet Explorer and Netscape Navigator):
| The Internet Explorer DOM looks like this...
document
|
The Netscape
DOM looks like this...
document (layers)
|
DOM Events
DOM events enable developers to create applications that include "triggers" based on user interaction or page operations. User interaction includes clicking buttons or moving the mouse. Page operations include loading the web page into the browser.
Typical events include:
| onmousemove - when a mouse is moved |
| onmouseover - when the mouse is moved over an object |
| onmouseout - when the mouse moves off an object |
| onmousedown - when the mouse is clicked |
| onmouseup - when the mouse is released |
| onclick - when mouse button is clicked (e.g., a button is pressed) |
| onchange - when data is entered (e.g., a text box is changed) |
| onsubmit - when the submit button is pressed and the form is sent to a web server |
| onreset - when the reset button is pressed |
| onload - when the document is loaded into the browser |
| onfocus - when the cursor is moved to a form element |
| onblur - when focus is lost from a form element |
| onkeypress - when a key is pressed (form element) |
| onkeydown - when the key is pressed down (form element), prior to onkeypress |
| onkeyup - on release of the key, follows onkeypress |
Other Information Resources on DOM
| W3C DOM Specification: http://www.w3.org/DOM/ |
| IE/Document Object Model: http://msdn.microsoft.com/workshop/author/om/doc_object.asp |
| Netscape Document Object Model: http://developer.netscape.com/tech/dom/ |