DHTML - HTML DOM

« Previous Chapter 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 Below 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>
Code it Online »

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 Below example changes The source attibute of an img element:

Example

<html>
<body>

<img id="image" src="map-icon.png">

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

</body>
</html>
Code it Online »

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 source attribute of that element from "map-icon.png" to "thinking.png"
« Previous Chapter Next Chapter »
Have Any Suggestion? We Are Waiting To Hear from YOU!

Your Query was successfully sent!