Article
Rough Guide to the DOM
Navigating The Family Tree
In addition to the various childNodes[], the DOM also offers a number of other objects/properties which can simplify navigation between document elements.
firstChild- a reference to the first child node in the collectionlastChild- a reference to the last child node in the collectionparentNode- a reference to the node one level up in the treenextSibling- a reference to the next node in the current collectionpreviousSibling- a reference to the previous node in the current collection
And so, with reference to the example above, I could use any of the alternative routes below to navigate to the <div> tag.
document.childNodes[0].childNodes[1].firstChild
document.childNodes[0].firstChild.nextSibling.firstChild
document.childNodes[0].childNodes[1].firstChild.firstChild.parentNode
Each child in the tree can be either an HTML tag or a "text node". This brings up an important point - blank spaces and carriage returns between the various tags can affect the document tree structure, creating text nodes in the tree structure and causing much gnashing of teeth as you adjust your code to the new tree.
What's In A Name?
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.
Ducks In A Row
In addition to the getElementById() method, which is typically used to obtain a reference to a specific element, the DOM also offers the getElementsByTagName() method, used to return a collection of a specific type of element. For example, the code
document.getElementsByTagName("form");
would return a collection, or array, containing references to all the <form> tags in the document. Each of these references is a node, and can then be manipulated using the standard DOM methods and properties.
Consider the following document, which contains three <div>s, each containing a line of text
<html>
<head>
</head>
<body bgcolor="white">
<div id="huey">
Huey here!
</div>
<div id="dewey">
Dewey in the house!
</div>
<div id="louie">
Yo dude! How's it hangin'?
</div>
</body>
</html>
and then study the code I'd use to manipulate the text within the second <div>
<script language="JavaScript">
// get a list of all <div> tags
var divCollection = document.getElementsByTagName("div");
// get a reference to the second <div> in the collection
var deweyObj = divCollection[1];
// verify that we are where we think we are
// alert(deweyObj.getAttribute("id"));
// change the text string within the <div>
deweyObj.childNodes[0].data = "Dewey rocks!";
</script>
A collection of all the tags within a document (a lot like "document.all") can be obtained with
document.getElementsByTagName("*");
Copyright Melonfire, 2000. All rights reserved.