Rough Guide To The DOM (part 1) - Changing Things Around (
Page 6 of 8 )
Now that you know how to find your way to specific HTML elements in the
document, it's time to learn how to manipulate them. Since most of this
manipulation involves altering tag attributes on the fly, the DOM offers
the getAttribute() and setAttribute() methods, which are designed expressly
for this purpose.
Consider the following modification to the example you just saw, which uses
these 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've
first used the getAttribute() method to return the current value of the
attribute, and then used the setAttribute() method to write a new value.
However, altering the text string is simply a matter of changing the value
of the text node's "data" property.
There are a couple of things to keep in mind when using getAttribute() and
setAttribute(). All attribute names should be lowercase, and both names and
values should be enclosed in quotes (if you omit the quotes, the values
will be treated as variables). Obviously, you should only use attributes
which are relevant to the tag under consideration - for example, you cannot
use a setAttribute("src") on a <font> tag.
/ 10 
