Home arrow DHTML arrow Page 4 - Rough Guide To The DOM (part 1)

What's In A Name? - 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.

TABLE OF CONTENTS:
  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
Poor Best
Rating: starstarstarstarstar / 10
April 09, 2001

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement
It's precisely for this reason that the DOM offers a faster and moreefficient method of accessing elements within the page - thegetElementById() method.

I've rewritten the example above to demonstrate how this method can be used.

<script language="JavaScript">
var obj = document.getElementById("a");
obj.style.color = "red";
</script>

As you can see, this is much simpler to read...and code.

Every node has some basic properties which come in handy for the developer- for example, the "nodeName" property returns the tag name, while the"nodeType" property returns a number indicating the type of node (HTMLtag=1; HTML tag attribute=2; text block=3). If the node happens to be atext node rather than a tag, the "data" and "nodeValue" properties returnthe text string.

The following example demonstrates how the various node properties can beaccessed - uncomment the various alert() method calls to display thevarious object 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];
// 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 - returns 3
// alert(textObj.nodeType);
</script>
</body>
</html>

And incidentally - a text node which contains no data returns the value"#text" to the "nodeName" property - try replacing the line of text fromwithin the <font> tags above with a couple of blank spaces to see what I mean.


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

blog comments powered by Disqus
   

DHTML ARTICLES

- 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
Find More DHTML Articles


© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 2 - Follow our Sitemap

Dev Shed Tutorial Topics: