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 more
efficient method of accessing elements within the page - the
getElementById() 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 (HTML
tag=1; HTML tag attribute=2; text block=3). If the node happens to be a
text node rather than a tag, the "data" and "nodeValue" properties return
the text string.
The following example demonstrates how the various node properties can be
accessed - uncomment the various alert() method calls to display the
various 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 from
within the <font> tags above with a couple of blank spaces to see what I mean.
/ 10 
