DHTML - HTML Document Object Model (DOM)

The DOM presents HTML as a tree-structure (a node tree), with elements, attributes, and text:

DOM HTML tree

Examples

innerHTML
How to access and change the innerHTML of an element.

Attribute change
How to access an image element and change the "src" attribute.

What is the HTML DOM?

The HTML DOM is:

A standard object model for HTML
A standard programming interface for HTML
Platform- and language-independent
A W3C standard

The HTML DOM defines the objects and properties of all HTML elements, and the methods (interface) to access them.

In other words:

The HTML DOM is a standard for how to get, change, add, or delete HTML elements.

Using the HTML DOM to Change an HTML Element

The HTML DOM can be used to change the content of an HTML element:

<html>  <body>    <h1 id="header">Old Header</h1>    <script type="text/javascript">  document.getElementById("header").innerHTML="New Header";  </script>    </body>  </html>

HTML output:

New Header

Example explained:

The HTML document contains a header with id="header"
The DOM is used to get the element with id="header"
A JavaScript is used to change the HTML content (innerHTML)

Try it yourself

Using the HTML DOM to Change an HTML Attribute

The HTML DOM can be used to change the attribute of an HTML element:

<html>  <body>    <img id="image" src="smiley.gif">    <script type="text/javascript">  document.getElementById("image").src="landscape.jpg";  </script>    </body>  </html>

HTML output:

Example explained:

The HTML document loads with an image with id="image"
The DOM is used to get the element with id="image"
A JavaScript changes the src attribute from smiley.gif to landscape.jpg

Try it yourself

More About the HTML DOM

If you want to study more about the HTML DOM, find the complete HTML DOM tutorial on our Home Page.

DHTML Event Handlers

HTML events can trigger actions in the browser.

Try it Yourself - Examples

onclick
How to change an image when a user clicks on it.

onmousedown and onmouseup
Change an image when a user holds down the mouse button.

onload
Display an alert box when the page has finished loading.

Event handlers

An event handler allows you to execute code when an event occurs.

Events are generated by the browser when the user clicks an element, when the page loads, when a form is submitted, etc.

In the following example, the h1 heading changes when a user clicks on it:

Example

<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text</h1>
</body>
</html>

You can also add a script in the head section of the page and then call the function from the event handler:

Example

<html>
<head>
<script type="text/javascript">
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text</h1>
</body>
</html>

More About HTML Events

For all HTML events, look at our complete HTML DOM Event Object Reference.