DHTML DOM

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. The Document Object Model is a working standard approved by the W3C that is correctly implemented in most modern browsers.

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>
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> 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> 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 > 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> 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> tag on a form, a Password object is created
Radio Represents radio buttons on an HTML form. For each instance of an HTML <input> 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> 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> 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> 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
DOWNLOAD SOLUTION HERE