Dynamic HTML is the combination of HTML or XHTML, CSS level 2, and JavaScript. What holds all these technologies together is the Document Object Model (DOM), an internal roadmap of all objects found on a web page. The DOM is a hierarchy of objects with the browser window at the top of the hierarchy. The document object is one level below the window object. Any scriptable objects within the document, such as forms, may also have subordinate objects as in this brief code excerpt.
<form name="sampleform" id="sampleform">
<input type="text" name="username" id="username" />
</form>
In this example, the text field may be addressed in the DOM by referring to the value in its name attribute.
document.sampleform.username
The most current browsers, however, also support DOM references using the id attribute. In the example above, the text field could also be addressed in this way.
document.getElementById('username');
Support for the older method of addressing objects will be gradually phased out in Web browsers over the years so Web developers are being encouraged by the W3C to adopt the document.getElementById method.
Here is an image to help you visualize the DOM.
The hierarchical structure of a Web page.
<html>
</html> |