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

Navigating The Family Tree - 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.

  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
Rating: starstarstarstarstar / 10
April 09, 2001

print this article


In addition to the various childNodes[], the DOM also offers a number ofother objects/properties which can simplify navigation between documentelements.

firstChild - a reference to the first child node in the collection

lastChild - a reference to the last child node in the collection

parentNode - a reference to the node one level up in the tree

nextSibling - a reference to the next node in the current collection

previousSibling - a reference to the previous node in the current collection

And so, with reference to the example above, I could use any of thealternative 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". Thisbrings up an important point - blank spaces and carriage returns betweenthe various tags can affect the document tree structure, creating textnodes in the tree structure and causing much gnashing of teeth as youadjust your code to the new tree.

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

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- 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

Developer Shed Affiliates


Dev Shed Tutorial Topics: