Home arrow DHTML arrow 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.

  1. Rough Guide To The DOM (part 1)
  2. Back To Basics
  3. Navigating The Family Tree
  4. What's In A Name?
  5. Ducks In A Row
  6. Changing Things Around
  7. Alternatives
  8. Shazam!
By: Vikram Vaswani, (c) Melonfire
Rating: starstarstarstarstar / 10
April 09, 2001

print this article


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.

>>> More DHTML Articles          >>> More By Vikram Vaswani, (c) Melonfire

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Google Gives Buckyball a Tribute Doodle in H...
- Rough Guide To The DOM (part 2)
- Rough Guide To The DOM (part 1)
- Filters And Transitions In IE5
- Understanding Embedded Fonts

Developer Shed Affiliates


Dev Shed Tutorial Topics: