DOM Viewer

This JavaScript utility allows you to interactively browse the Document Object Model representation of a page. Its designed to help developers in finding the various objects, properties and values associated with elements and other objects in an web page.

The script creates a display of the properties and values for a given DOM object with links for expanding any property that is itself an object. These objects are what client-side scripts use to programmatically access and update a page.

Navigating The Document Tree

The DOM consists of nodes connected in a tree structure. Nodes can represent an element, textual content, an attribute, etc. each with distinct properties. But all nodes include common properties related to this tree structure. Among these are properties such as firstChild, previousSibling and parentNode. Using these you can navigate up, down or across the tree to other nodes.

By default, the display starts at the root, that is, the document object. But any object can be specified as the starting node, as described below. The demo also provides some examples.

Using the Utility

The script exists in its own HTML page. It's designed to be opened in a new window from the target page. The reason for this is that loading the script in the same page as the one to be examined would alter the target page's contents, and hence its DOM representation, dramatically.

By launching it in a separate window, the impact on the target page can be kept to a minimum. There are several ways to do this, the easiest being to add a simple link or a JavaScript window.open() call to the target page:

<a href="domviewer.html" target="_blank">launch viewer</a>

<script>
window.open('domviewer.html');
</script>

Specifying the Starting Object

To start the display at an object other than the document root, you need to set up a couple of JavaScript variables in the target page before launching the viewer. For example:

<p id="myElement">This is a simple paragraph.</p>

...

<script>
  var DOMViewerObj = document.getElementById("myElement")
  var DOMViewerName = null;
  window.open('domviewer.html');
</script>

The code above uses the built-in getElementById method to gain a reference to the object representing a specific P tag. The DOM viewer will look for a variable called DOMViewerObj in the target page when it is launched. If it's been set, the object that it points to will be used as the starting point for the display. In this case, it will use the P tag.

DOMViewerName is simply a text string you can specify to be used as a name for the object. If set to null, the script will attempt to use the name given by the object's id attribute, if any. So in the above example, it would default to "myElement."

Interpreting the Results

Within the DOM view, any property that has an object for a value can be dynamically expanded by clicking on the link provided. This includes collections and arrays, which will be enumerated when expanded. Clicking on the object link again collapses the display.

The parent, child and sibling types of properties can be used to navigate through the document tree structure. The display will simply show the corresponding property name appended to the object name. So you might see a display like the following:

• ...
• document.body.firstChild.nextSibling.nextSibling = [object HTMLParagraphElement]
  • document.body.firstChild.nextSibling.nextSibling.align = ...
  • document.body.firstChild.nextSibling.nextSibling.attributes = ...
  • document.body.firstChild.nextSibling.nextSibling.childNodes = ...
  • document.body.firstChild.nextSibling.nextSibling.className = ...
  • ...
  • document.body.firstChild.nextSibling.nextSibling.id = myParagraph
  • ...
• ...

Obviously, there are easier and better ways to reference most objects other than drilling down from the root when writing JavaScript code. For example, you can set an id attribute on a tag and use the document.getElementById() method to reference it directly:

<p id="myParagraph">Some example text.</p>

...

<script>
var el = document.getElementById("myParagraph");
el.style.color = "#ff0000";
</script>

<script>
  document.body.firstChild.nextSibling.nextSibling.style.color
    = "#ff0000";
</script>

This type of direct access is especially useful since any modifications can change the DOM hierarchy, requiring changes to any root-based references.

You should note that the display is a snapshot of the target page. If the contents of the target page change, the display will not accurately reflect those changes until reloaded. Likewise, when expanding an object, the script will show the current state of that object, while the rest of the display will remain unchanged if other objects on the target page have been modified.

Browser Compatibility

Different browsers will show different views. Individual object structures and properties vary from browser to browser, even when a browser supports standards.

In some cases, it may be due to attempts at backward compatibility with earlier versions of the browser. Or a particular standard may not be supported or it is supported but the standard itself is open to interpretation.

The whole point of the utility is to allow you to see the actual DOM structure for a given browser. You can then use this information when writing code for a particular browser or when attempting to account for differences between browsers.

Next