Rough Guide To The DOM (part 1) - Back To Basics (
Page 2 of 8 )
We'll start with the basics - a very simple HTML page.
<html><head></head><body bgcolor="white"><div id="a" style="font-family:
Arial; color: white; background: black">Wassup?</div></body></html>
Let's alter the font colour of the text within the <div>. In Internet
Explorer, this would typically be accomplished with
<script language="JavaScript">
document.all.a.style.color = "red";
</script>
Here's the code I would use in Mozilla:
<script language="JavaScript">
var obj = document.childNodes[0].childNodes[1].childNodes[0];
obj.style.color = "red";
</script>
An explanation is in order here. Under the new DOM, every element in an
HTML document is part of a "tree", and you can access each and every
element by navigating through the tree "branches" until you reach the
corresponding "node". Given that, here's my representation of the HTML
document above, in "tree" form.
document
| -- <html>
| -- <head>
| -- <body>
| -- <div>
Now, to get to the <div>, I need to:
1. start at the top ("document");
2. move down to the main branch - the <html> tag, or
"document.childNodes[0]";
3. then to the second sub-branch - the <body> tag or
"document.childNodes[0].childNodes[1]";
4. then to the <div> - "document.childNodes[0].childNodes[1].childNodes[0]";
At this point, I have successfully navigated my way to the <div> element in
the document tree. A quick way of verifying this is to use an alert() on
the object
<script language="JavaScript">
var obj = document.childNodes[0].childNodes[1].childNodes[0];
alert(obj.nodeName);
obj.style.color = "red";
</script>
which displays the name of the tag - DIV - in an alert box.
At this point, I can begin futzing with object attributes - in the example
above, I've altered the "color" style attribute. Don't worry about this for
the moment; simply verify that you have understood the manner in which I
navigated through the document tree to reach the DIV.
/ 10 
