Article
Rough Guide to the DOM
Rough Guide To The DOM - Part 2
Digging Deeper
In the first part of this article, I took you through the basics of navigating an HTML document via the DOM, and explained the various methods and collections available to you. If you understood all that (and I hope you did), you should now have a pretty clear idea of how to manipulate a typical HTML document, and change interface elements on the fly.
Over the next few pages, I'm going to dig a little deeper into the DOM, with illustrations of how the DOM interfaces with tables, forms, images and frames. I'll also be discussing some of the methods available to add (and modify) nodes to the DOM tree through JavaScript, and point you to some of the Web's better resources on the subject.
Let's get cracking!
Making The Swap()
The first item on the agenda today is an illustration of how you can use the DOM to accomplish one of the most popular dHTML applications - the image swap. Take a gander at the following HTML document:
<html>
<head>
</head>
<body>
<a href="http://www.melonfire.com/" onMouseOver="javascript:imageSwap();"
onMouseOut="javascript:imageSwap();"><img id="logo" src="logo_n.gif"
width=50 height=50 border=0></a>
</body>
</html>
Now, I've set this up so that "mouseover" and "mouseout" events on the image are handled by the JavaScript function imageSwap(). This function is responsible for swapping the image each time an event occurs - so let's take a look at it.
<script language="JavaScript">
var normal = "logo_n.gif";
var hover = "logo_h.gif";
function imageSwap()
{
var imageObj = document.getElementById("logo");
var imageSrc = imageObj.getAttribute("src");
if (imageSrc == normal)
{
imageObj.setAttribute("src", hover);
}
else
{
imageObj.setAttribute("src", normal);
}
}
</script>
If you remember what I taught you last time, none of this should come as a surprise. I've first defined the "normal" and "hover" state images, and then created a function called imageSwap(), which is called whenever the mouse moves over and out of the image.
The imageSwap() function obtains a reference to the image via its ID, and then obtains the current value of the image's "src" attribute. It then checks the value against the values of the "normal" and "hover" variables, and changes the image source appropriately.
Turning The Tables
Next up, tables. Take a look at the following HTML document, which contains a table with two rows, three cells each.
<html><head></head><body><table border="1" cellspacing="5"
cellpadding="5"><tr><td>R1, C1</td><td>R1, C2</td><td>R1,
C3</td></tr><tr><td>R2, C1</td><td>R2, C2</td><td id="r2c3">R2,
C3</td></tr></table></body></html>
Now, when navigating through a table, there's one important point to be aware of - from the DOM vie, a table must be treated as though it included an additional <tbody> tag immediately after the <table> tag and before the <tr> tags. Adding this to the equation, the page above now looks like this:
<html><head></head><body><table border="1" cellspacing="5"
cellpadding="5"><tbody><tr><td>R1, C1</td><td>R1, C2</td><td>R1,
C3</td></tr><tr><td>R2, C1</td><td>R2, C2</td><td id="r2c3">R2,
C3</td></tr></tbody></table></body></html>
The usual DOM navigation rules now apply, as the following example demonstrates. This script drills down to the last cell of the second row and alters both the background colour of the cell and the text string within it.
<script language="JavaScript">
// get to the cell
// you could also use
// var cellObj =
document.childNodes[0].childNodes[1].childNodes[0].childNodes[0].
childNodes[1].childNodes[2];
var cellObj = document.getElementById("r2c3");
// get to the text within the cell
var cellTextObj = cellObj.childNodes[0];
// set background colour
cellObj.setAttribute("bgcolor", "red");
// and text
cellTextObj.data = "Second row, third column";
</script>
Copyright Melonfire, 2000. All rights reserved.