|
|
|
Page 1
Q:
Dear Webmonkeys,
I keep hearing about "dynamic HTML," but I don't understand what it is. I really think you should write about it.
- Fern
A:
Dear Fern,
First of all, dynamic HTML as a self-contained thing-unto-itself is really just an idea. It is not any one specific technology (such as JavaScript or ActiveX). Nor is it a tag, a plug-in, or a browser.
Dynamic HTML (aka dHTML or DHTML) is one of the most exciting and useful things to happen to the Web in recent memory. It's a concept that has been enabled (to different extents in different browsers, of course) by a number of technologies, including JavaScript, VBScript, the Document Object Model (DOM), layers, and Cascading Style Sheets (CSS).
So, what IS it? Here's the short answer: Dynamic HTML is simply HTML that can change even after a page has been loaded into a browser. A paragraph could turn blue when the mouse moves over it, or a header could slide across the screen. Anything that can be done in HTML can be redone after the page loads.
So, how can HTML be changed after it's been downloaded? There needs to be some way to tell the browser to change it, which brings us to the technologies that make up DHTML:
- Dynamic HTML is client-side scripting
People have been using client-side scripting languages (JavaScript and VBScript in particular) to change HTML for a long time. If an image changes when you roll your mouse over it, you're looking at an example of dynamic HTML. The 4.0 browsers from both Microsoft and Netscape allow more of a page's HTML elements to be accessible from within scripting languages. The mechanism whereby page elements (or document objects) are opened to scripting languages is called the Document Object Model.
- Dynamic HTML is the DOM
In a sense, the Document Object Model is the real core of dynamic HTML. It makes HTML changeable. The DOM is the hierarchy of elements that are present in the browser at any given time. This includes environmental information such as the current date and time, browser properties such as the browser's version number, window properties such as window.location (the page's URL), and HTML elements such as <p> tags, divs, or tables. By exposing the DOM to scripting languages, browsers enable you to access these elements. While some elements such as the time of day can't be changed themselves, they can be used by scripts to modify other elements.
As Taylor has previously described, there was a Document Object Model before Internet Explorer 4.0, but earlier implementations pale in comparison. With IE 4, it is possible
to access any part of the HTML on your page using any scripting language that runs in the browser.
(Although Netscape's DOM is much more limited than IE's, you can put the part of your page you want to change in a layer container and then change the layer. And Netscape says it will fully support the W3C's DOM specification in future versions of the browser.)
The part of the DOM that specifies which elements can trigger changes is the event model. Events are things like moving the mouse over an element (onmouseover), loading a page (onload), submitting a form (onsubmit), clicking on a form input field (onfocus), and so on.
- Dynamic HTML is CSS
Because they are part of the DOM, CSS properties are accessible to scripting languages, and it is therefore possible to change almost anything about the way a page looks. By changing the CSS properties of a page element (such as its color, position, or size), you can do almost anything bandwidth and processor speed permit.
To sum all this up: CSS (and plain old HTML) is what you change,
the DOM is what makes it changeable, and client-side scripting is
what actually changes it. And that's dynamic HTML.
To learn more, take Taylor's dHTML Crash Course.
|
|
|
