HOME

DHTML Tutorial
DHTML HOME
DHTML Intro
DHTML CSS
DHTML DOM
DHTML Events
DHTML Summary

DHTML DOM
DOM Reference

DHTML Examples
DHTML Examples
DOM Examples

Selected Reading
Web Statistics
Web Glossary
Web Hosting
Web Quality

W3Schools Forum

Helping W3Schools

DHTML Document Object Model

The Document Object Model gives us access to every element in a document.

Examples

Note: Most of the DHTML examples require IE 4.0+, Netscape 7+, or Opera 7+!

Element access
How to access an element and change the style.

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

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

How to access an element?

The element must have an id attribute defined and a scripting language is needed. JavaScript is the most browser compatible scripting language, 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>

The script changes the color of the header element, and produces this output.

My header

Jump to: Top of Page or HOME or Printer friendly page

W3Schools provides material for training only. We do not warrant the correctness of its contents. The risk from using it lies entirely with the user. While using this site, you agree to have read and accepted our terms of use and privacy policy.

W3Schools was converted to XHTML in December 1999