Dynamic HTML and the Document Object Model - HTML

“Dynamic HTML” talked a lot about the Document Object Model (DOM) and objects, which can seem pretty daunting at first, so let’s break it down to the simplest scale, that of CSS. Say you have a div element with a blue font inside it. To make the div (and its contents) accessible by script, you need to identify it somehow. You can do this using the id attribute of the <div> tag. The id attribute is available to every HTML element for this very reason. So you can write a div element like so:

<div id=“myID” style=“color:blue”>I’m blue now, but I may not be later.</div>

Notice that since the example uses CSS, there’s no need to use the font element to color our text. Now, say you want to change the text to red. This is easy with the DOM and JavaScript, especially if you’re using Internet Explorer 4 or above, because IE makes accessing the DOM just a tad easier than some other browsers do:

<div id=“myID” style=“color:blue; cursor:hand”
onclick=“this.style.fontSize=‘60px’; this.style.color=‘red’”>
I’m blue now, but I may not be later.</div>

If you load the preceding code fragment into Internet Explorer, your browser will render.When this text styled in CSS is clicked, it will change.

Dynamic HTML and the Document Object Model

Listing shows some modification to the previous code fragment. This time, the this keyword isn’t used because another div object is created, along with an onClick event handler for that div object. When the new div object is clicked, the text in the div object labeled by the myID attribute gets bigger and turns red.

Note Listing only works in IE4 and later and Mozilla/Netscape with Gecko engines (Netscape 7 and later).

Accessing an Element by Drilling Down the DOM Hierarchy

<html>
<head>
<title>Setting CSS Properties Using Cross-Browser Scripting
Routines</title>
</head>
<body>
<div id=“myID” style=“color:blue;”>
<p>I’m blue now, but I may not be later.</p>
</div>
<div style=“width: 100px; padding: 4px; background-color:
#cccccc; border: blue outset 1px; cursor:hand”>
<div align=“center”><a href=“#” style=“text-decoration:
none” title=“Click to change font styles!”
onclick=“myID.style.fontSize=‘60px’;
myID.style.color=‘red’”>Click
here</a> </div>
</div>
</body>
</html>

Notice in Listing the relationship between the myID attribute and the code that is executed by the onclick event. Normally, you’ll call a function from an onclick event. But you can also simply execute the script from the event handler, as well. You can see the changes in Figures.

This text can be changed by clicking the Click Here button.

This text can be changed by clicking the Click Here button

When the button is clicked, the text changes.

When the button is clicked, the text changes

The solutions for changing CSS shown so far are of limited use because they rely on Gecko’s and Internet Explorer’s interpretation of the object model, the latter of which deviates quite substantially from that of the W3C object model. They both share the same core object model defined by the Document Object Model of the W3C. However, Internet Explorer expands on the DOM by a substantial amount.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML Topics