Home arrow DHTML arrow Page 2 - Rough Guide To The DOM (part 1)

Back To Basics - 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.

TABLE OF CONTENTS:
  1. Rough Guide To The DOM (part 1)
  2. Back To Basics
  3. Navigating The Family Tree
  4. What's In A Name?
  5. Ducks In A Row
  6. Changing Things Around
  7. Alternatives
  8. Shazam!
By: Vikram Vaswani, (c) Melonfire
Poor Best
Rating: starstarstarstarstar / 10
April 09, 2001

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement
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 InternetExplorer, 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 anHTML document is part of a "tree", and you can access each and everyelement by navigating through the tree "branches" until you reach thecorresponding "node". Given that, here's my representation of the HTMLdocument 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 inthe document tree. A quick way of verifying this is to use an alert() onthe 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 exampleabove, I've altered the "color" style attribute. Don't worry about this forthe moment; simply verify that you have understood the manner in which Inavigated through the document tree to reach the DIV.


 
 
>>> More DHTML Articles          >>> More By Vikram Vaswani, (c) Melonfire
 

blog comments powered by Disqus
   

DHTML ARTICLES

- Google Gives Buckyball a Tribute Doodle in H...
- Rough Guide To The DOM (part 2)
- Rough Guide To The DOM (part 1)
- Filters And Transitions In IE5
- Understanding Embedded Fonts
Find More DHTML Articles


© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 6 - Follow our Sitemap

Dev Shed Tutorial Topics: