Article
Rough Guide to the DOM
Changing Things Around
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.
Alternatives
An alternative way of obtaining (and setting) attribute values is via the attributes[] collection, which is essentially an array containing a list of all the attribute-value pairs for a specific tag. I've modified the previous example to illustrate how this works - uncomment the various alert()s to see the values of the different properties.
<html>
<head></head>
<body id="body" bgcolor="white">
<font face="Arial" size="2">This stuff is giving me
a headache already!</font>
<script language="JavaScript">
// get to the <font> tag
var fontObj = document.getElementById("body").childNodes[0];
// return the number of attributes of the <font> tag
// or the length of the attributes[] collection
// returns 2
// alert(fontObj.attributes.length);
// returns the name of the first attribute - "face"
// alert(fontObj.attributes[0].name);
// returns the value of the first attribute - "Arial"
// alert(fontObj.attributes[0].value);
// changes the value of the first attribute to "Verdana"
fontObj.attributes[0].value = "Verdana";
// returns the new value of the first attribute - "Verdana"
// alert(fontObj.attributes[0].value);
</script>
</body>
</html>
Copyright Melonfire, 2000. All rights reserved.