With DHTML, you can easily add effects to your web pages. Basically, DHTML is a combination of HTML, JavaScript, DOM (Document Object Model), and CSS (Cascade Style Sheet). It is not a language it stands for Dynamic HTML.
(i) HTML – it supports JavaScript, CSS and DOM.
(ii) JavaScript - scripting standard for HTML. Manipulates elements using events.
(iii) HTML DOM - The HTML DOM defines a standard set of objects for HTML, and a standard way to access and manipulate them.
(iv) CSS – allows us to style the layout of web pages.
Note: We described HTML and CSS in CWDD 101, Unit 6 and 7 respectively.
The function of a web browser (like Internet Explorer or Firefox, etc) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret Content of the web page.
For Example:
<html>
<body>
<h1>A Heading</h1>
<p>A paragraph.</p>
</body>
</html>
Explanation:
• The text between <html> and </html> describes the web page
• The text between <body> and </body> is the visible page content
• The text between <h1> and </h1> is displayed as a heading
• The text between <p> and </p> is displayed as a paragraph
HTML DOM (Document Object Model)-
It is the Document Object Model for HTML. It is a standard for how to get, change, add, or delete HTML elements.
HTML DOM methods are actions you can perform (on HTML Elements).
HTML DOM properties are values (of HTML Elements) that you can set or change.
Example:
The following example changes the content (the innerHTML) of the <p> element with id=“show”:
<html>
<body>
<p id=“show”></p>
<script>
document.getElementById(“show”).innerHTML = “Hello World!”;
</script>
</body>
</html>
In the example above, getElementById is a method, while innerHTML is a property.
“getElementById” method-
The most common way to access an HTML element is to use the id of the element. In the example above the getElementById method used id=“demo” to find the element
“innerHTML” property-
a. The easiest way to get the content of an element is by using the innerHTML property.
b. The innerHTML property is useful for getting or replacing the content of HTML elements.
c. The innerHTML property can be used to get or change any HTML element, including <html> and <body>.
JavaScript and HTML DOM-
A JavaScript can also be used to change the content or attributes of HTML elements. To modify the content of an HTML element:
document.getElementById(id).innerHTML=new HTML
To change the attribute of an HTML element:
document.getElementById(id).attribute=new value
Example: The Below example changes the content of an h1 element:
<html>
<body>
<h1 id=“header”>Watch me changing</h1>
<script type=“text/JavaScript”>
document.getElementById(“header”).innerHTML=“I am New Text”;
</script>
</body>
</html>
• 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
Note- You also have learnt about JavaScript in CWDD 102, Unit 1.
JavaScript and CSS-
A JavaScript can also change the style of HTML elements. To change the style of an HTML element:
document.getElementById(id).style.property=new style
Example: Below example changes color of heading
<html>
<body>
<h1 id=“header” onclick=“document.getElementById(‘header’).style.color=‘red’“>
Click here to change my color
</h1>
</body>
</html>
Explanation:
• 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 style.color of that element
Example: Here is an example of DHTML, using JavaScript onclick event and CSS style property.
<html>
<body>
<p id=“para”>This ia an example of DHTML. You can add effects and dynamically change your page style using JavaScript events and CSS.<br />
You are now capable to learn methods that can be used to design a dynamic and interactive web page. Welcome to the world of Magic…
</p>
<input type=“button” value=“Hide text” onclick=“document.getElementById(‘para’).style.visibility=‘hidden’“ />
<input type=“button” value=“Show text” onclick=“document.getElementById(‘para’).style.visibility=‘visible’“ />
</body>
</html>