HomeDHTML Page 6 - Rough Guide To The DOM (part 1)
Changing Things Around - DHTML
It's the bane of Web developers everywhere - conflicting standards, browser incompatibilities, and code that changes every time a new browser version hits the Web. But fear not - charging in on a white steed comes a heroic knight, clad in the attire of the new W3C DOM and armed with the tools to make this nightmare end forever. Read on to find out how the new DOM finally brings some standards to the decidedly non-standard world of the Web.
Now that you know how to find your way to specific HTML elements in thedocument, it's time to learn how to manipulate them. Since most of thismanipulation involves altering tag attributes on the fly, the DOM offersthe getAttribute() and setAttribute() methods, which are designed expresslyfor this purpose.
Consider the following modification to the example you just saw, which usesthese two methods to alter the font size and the text string.
<html><head></head><body id="body" bgcolor="white"><font face="Arial"
size="2">This stuff is giving me a headache already!</font><br>Click to <a
href="javascript:increaseFontSize();">increase font size</a> or <a
href="javascript:changeText()">change text string</a>
<script language="JavaScript">
// get to the <font> tag
var fontObj = document.getElementById("body").childNodes[0];
// check the tag - returns "FONT"
// alert(fontObj.nodeName);
// check the type of node - returns 1
// alert(fontObj.nodeType);
// get the text within the <font> tag
var textObj = fontObj.childNodes[0];
// check the text value - returns "This stuff is giving me a headache
already!"
// alert(textObj.data);
// check the type of node - returs 3
// alert(textObj.nodeType);
function changeText()
{
// alter the node value
textObj.data = "I need some aspirin. Now.";
}
function increaseFontSize()
{
// get the value of the "size" attribute of the node
var size = fontObj.getAttribute("size");
// increase by 1
size += 1;
// set the new value
fontObj.setAttribute("size", size);
}
</script>
</body>
</html>
I've used two different methods here. In order to alter the font size, I'vefirst used the getAttribute() method to return the current value of theattribute, and then used the setAttribute() method to write a new value.However, altering the text string is simply a matter of changing the valueof the text node's "data" property.
There are a couple of things to keep in mind when using getAttribute() andsetAttribute(). All attribute names should be lowercase, and both names andvalues should be enclosed in quotes (if you omit the quotes, the valueswill be treated as variables). Obviously, you should only use attributeswhich are relevant to the tag under consideration - for example, you cannotuse a setAttribute("src") on a <font> tag.
/ 10 
