JavaScript DOM host objects

Provided that an HTML document is correctly composed so that the HTML markup in it is well-ordered, the HTML tags fit together in a hierarchy. Consider this example:

<HTML>
<HEAD>
<TITLE> Pink Page </TITLE>
</HEAD>
<BODY>
<H1>Think Pink!</H1>
<BLOCKQUOTE>
All marshmellows, azaleas, but <STRONG> not </STRONG> panthers welcome.
</BLOCKQUOTE>
</BODY>
</HTML>

Re-stated as a diagram it appears as follows:

Insert diagram 12740901 which you have drawn

In the Document Object Model (henceforth DOM), each tag in a given document is supposed to have its own object. From this simple example it is easy to see how this could create quite large hierarchies. Imagine if these objects were named after their tags. To access a given tag's object from JavaScript would require quite long object references, possibly as follows:

top.document.html.body.blockquote.strong.contents;   // doesn't quite work like this

This example is not too bad, but a complex document could be far worse, especially since most documents have more than one paragraph and you need to know which one you are talking about. An HTML table alone adds three levels of objects to the hierarchy. This example doesn't include any style information either. There has to be a better way, and there is.