DHTML DOM

The Document Object Model(DOM) is an Application Programming Interface(API). Essentially, it provides a platform where programming languages can "talk" to HTML and XML documents. Usually the programming language that does the talking by using JavaScript.

DOM vs DHTML Object Model

The Document Object Model evolved from the DHTML Object Model, but one may dispute that it is more like a revolution than an evolution. The DHTML Object Model lets you update and access HTML objects individually. Each HTML tag can be manipulated and accessed via its NAME and ID attributes. Each object have its own properties, methods, and events. You can use the properties update local attributes of the object. You can use the methods to manipulate the objects and take advantage of the events to trigger pre-defined consequences.

The DOM is much more general than the DHTML Object Model.Not just for a single HTML tag it provides a model for the whole document. The DOM represents a document as a tree. Every node of the tree represents an HTML tag. The tree structure accurately describes the whole HTML document, including relationships between tags and textual entries on the page. A relationship may be of the type child, parents and sibling.

To access an element?

The element must have an id attribute and a scripting language is needed. JavaScript is the most compatible scripting language for browser , so we use JavaScript.

<html>
<body>
<h1 id="header">My header</h1>
<script type="text/javascript">
document.getElementById('header').style.color="red"
</script>
</body>
</html>

output of above Script which change the color:

My Header

DHTML DOM Objects

With the help of JavaScript, you can manipulate and access all of the HTML DOM objects.
Here is a list of Document Object Model objects and their collections, properties, methods and events.

Object	Description
Anchor	Represents an HTML a element (a hyperlink)
Applet	Represents an HTML applet element. The applet element is used to place executable content on a page
Area	Represents an area of an image-map. An image-map is an image with clickable regions
Base	Represents an HTML base element
Basefont	Represents an HTML basefont element
Body	Represents the body of the document (the HTML body)
Button	Represents a push button on an HTML form. For each instance of an HTML <input type="button"> tag on an HTML form, a Button object is created
Checkbox	Represents a checkbox on an HTML form. For each instance of an HTML <input type="checkbox"> tag on an HTML form, a Checkbox object is created
Document	Used to access all elements in a page
Event	Represents the state of an event, such as the element in which the event occurred, the state of the keyboard keys, the location of the mouse, and the state of the mouse buttons
FileUpload	For each instance of an HTML <input type="file"> tag on a form, a FileUpload object is created
Form	Forms are used to prompt users for input. Represents an HTML form element
Frame	Represents an HTML frame
Frameset	Represents an HTML frameset
Hidden	Represents a hidden field on an HTML form. For each instance of an HTML <input type="hidden"> tag on a form, a Hidden object is created
History	A predefined object which can be accessed through the history property of the Window object. This object consists of an array of URLs. These URLs are all the URLs the user has visited within a browser window
Iframe	Represents an HTML inline-frame
Image	Represents an HTML img element
Link	Represents an HTML link element. The link element can only be used within the <head> tag
Location	Contains information about the current URL
Meta	Represents an HTML meta element
Navigator	Contains information about the client browser
Option	Represents an option in a selection list on an HTML form. For each instance of an HTML <option> tag in a selection list on a form, an Option object is created
Password	Represents a password field on an HTML form. For each instance of an HTML <input type="password"> tag on a form, a Password object is created
Radio	Represents radio buttons on an HTML form. For each instance of an HTML <input type="radio"> tag on a form, a Radio object is created
Reset	Represents a reset button on an HTML form. For each instance of an HTML <input type="reset"> tag on a form, a Reset object is created
Screen	Automatically created by the JavaScript runtime engine and it contains information about the client's display screen
Select	Represents a selection list on an HTML form. For each instance of an HTML <select> tag on a form, a Select object is created
Style	Represents an individual style statement. This object can be accessed from the document or from the elements to which that style is applied
Submit	Represents a submit button on an HTML form. For each instance of an HTML <input type="submit"> tag on a form, a Submit object is created
Table	Represents an HTML table element
TableData	Represents an HTML td element
TableHeader	Represents an HTML th element
TableRow	Represents an HTML tr element
Text	Represents a text field on an HTML form. For each instance of an HTML <input type="text"> tag on a form, a Text object is created
Textarea	Represents an HTML textarea element
Window	Corresponds to the browser window. A Window object is created automatically with every instance of a <body> or <frameset> tag