DOM ViewerSee the demo page for an example of how to use this tool and the source code.
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
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
window.open() call to the target
<a href="domviewer.html" target="_blank">launch viewer</a>or,
<script> window.open('domviewer.html'); </script>
Specifying the Starting Object
<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
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>instead of
<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.
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.