December 21, 2000 - Hopping to the Document's Root | WebReference

December 21, 2000 - Hopping to the Document's Root

Yehuda Shiran December 21, 2000
Hopping to the Document's Root
Tips: December 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

The DOM models an HTML document as a tree. The root of the tree is the document object itself. The node representing the root is document.documentElement. You can learn how to navigate from the root to its children and back, from the columns listed at the bottom of this tip. A relationship that is not yet supported by IE 5.5 (and therefore not covered by the columns below) is the document context of a node. Each tag you define in an HTML file (each tag is modeled by a node on the DOM tree), belongs to a certain document object. The property is ownerDocument. If we model the whole document in a single DOM tree, the ownerDocument property is a direct link between any node on the DOM tree and the root of the tree. The following expression should return the root of the DOM tree:

document.documentElement.ownerDocument

Let's print the node name (tag name), so it's easier to detect which node it is. You should get HTML as an answer. For printing the root's properties, always go the root node by using the documentElement property. The printing above is actually done via:

alert(document.documentElement.ownerDocument.documentElement.nodeName);

Now, let's go deeper in the tree, to document's first child (HEAD):

document.documentElement.firstChild

And then let's go directly back to the root of the DOM tree:

document.documentElement.firstChild.ownerDocument

As previously, let's print the node name of the root. Again, we go to the root node by the documentElement property:

alert(document.documentElement.firstChild.ownerDocument.documentElement.nodeName);

You should get HTML.

The code in this tip can be viewed only by Netscape 6.

Learn more about the DOM in Columns 40, The DOM, Part I: Analysis, through Column 47, A DOM-Based Snakes Game, Part II.