Scholar Repository
Home>Manual>DHTML Document Object Model

DHTML Document Object Model

From http://www.w3schools.com (Copyright Refsnes Data)

DHTML - HTML Document Object Model (DOM)

previous next


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:

landscape

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.


previous next

From http://www.w3schools.com (Copyright Refsnes Data)

Home>Manual>DHTML Document Object Model