In the core JavaScript language, objects are related to one another by means of the prototype chain. This is a hierarchy that determines the inheritance of functionality from a super-class, although it's an object-based inheritance and not really a class based inheritance. You can only walk up this hierarchy. There is no convenient way to determine what objects are sub-classed from an object.

From version 5.0 of MSIE and version 6.0 of Netscape, there are several hierarchy models available for traversing the document. The HTML view of the document is not quite the same as the DOM view. In general, each one is based on a property to traverse up the tree to a parent and collections for traversing down the tree to the leaf nodes. Here are some examples of the different hierarchical arrangements.

• The parentElement and children[] collection operate on the HTML tag-based hierarchy.

• The parentNode property and childNodes[] collection can be used to traverse the DOM hierarchy which exposes the interstitial text objects between the HTML tags. These are not visible to the HTML view.

• The spatial layout and positioning of objects relative to one another can be walked upwards by means of the offsetParent property. You can't traverse this tree from top to bottom without inspecting the contents of the children[] collection and looking at each child's offsetX and offsetY properties.

• The all[] collection flattens the whole tree from the receiving object downwards. The document.all[] collection is the complete tree. This can slow things down if you are searching it to find a single object.

• An editing hierarchy is constructed with the parentTextEdit property which describes the relationship between items that can have a text range created for them, and hence have some selectable content that can be cut or copied to the clipboard (usually as text).

• Function calls construct a hierarchy by means of the Argument objects which link upwards to the calling function's Arguments object. This provides a way to walk through a stack trace to diagnose a calling sequence.

• You can create custom hierarchies by using nested <DIV> tags and navigating them by means of the corresponding DIV objects they instantiate.

• A spatial hierarchy is created in Netscape version 4 with the <LAYER> tags. Layers sharing a common parent are siblings and can be ordered relative to one another.

• A CSS style hierarchy is implemented in MSIE to describe the relationship between CSS style rule objects and their owning parent style sheet.

• Another hierarchy can be built by importing style sheets into one another to allow styles to be managed in a more modular fashion. This is also supported at the rule level by means of the styleSheet.addRule() method.

The DOM level 2 standard adds a suite of traversal methods for walking through a document object model. It is embodied in the following classes:

• NodeIterator

• NodeFilter

• TreeWalker

• DocumentTraversal

Related to the traversal suite, the DOM level 2 standard also introduces the Range suite. This is embodied in these classes:

• Range

• DocumentRange

• RangeException