Rough Guide To The DOM (part 1) - Navigating The Family Tree (Page 3 of 8 )
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.
Next: What's In A Name? >>
More DHTML Articles
More By Vikram Vaswani, (c) Melonfire