Rough Guide To The DOM (part 1) - What's In A Name? (Page 4 of 8 )
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.
Next: Ducks In A Row >>
More DHTML Articles
More By Vikram Vaswani, (c) Melonfire
/ 9 
