HomeDHTML 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.
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.
/ 10 
