Shine Tutorial    
  shinetutorialtopsideimage
HOME DOS OS C,C++ HTML CSS XML JAVA ASP PHP SQL OFFICE MULTIMEDIA MORE... CERTIFICATION ABOUT
 
S T ADVT
TUTORIALS
 

DHTML - HTML DOM

« Previous Next Chapter »

What is the HTML DOM?

The HTML DOM is:

  • A Document 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.


Change an HTML Element

The following example changes the content of an h1 element:

Example

<html>
<body>

<h1 id="header">Old Header</h1>

<script type="text/javascript">
document.getElementById("header").innerHTML="New Header";
</script>

</body>
</html>

View it »

Example explained:

  • The HTML document above contains an h1 element with id="header"
  • We use the HTML DOM to get the element with id="header"
  • A JavaScript changes the content (innerHTML) of that element

Change an HTML Attribute

The following example changes the src attibute of an img element:

Example

<html>
<body>

<img id="image" src="smiley.gif">

<script type="text/javascript">
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

View it »

Example explained:

  • The HTML document above contains an img element with id="image"
  • We use the HTML DOM to get the element with id="image"
  • A JavaScript changes the src attribute of that element from "smiley.gif" to "landscape.jpg"

HTML DOM Tutorial

To learn more about the HTML DOM, please read our complete HTML DOM tutorial.


« Previous Next Chapter »