DOM Viewer
See the demo page for an example of how to use this tool and the source code.Coding Details
There are some interesting points in the script that may come in handy when creating or debugging code for DHTML effects.
The heart of the script is a function called showProperties()
which takes a given object and enumerates its properties and values for
display.
Getting an Object's Properties
In general, you can loop through a JavaScript object's properties using a
for (x in obj)
statement. The variable
x
will be set to the name of the property on each iteration, and
obj.x
gives the value of that particular property.
for (x in obj) document.writeln(x + " = " + obj.x + "<br />");
The showProperties()
function goes a bit further however. The
for
statement doesn't necessarily return the property names in any
particular order. So first the names are stored in a temporary array and sorted
alphabetically.
propertyList = new Array; for (property in obj) propertyList[propertyList.length] = String(property); propertyList.sort();
This array is then used to loop through each property, making it possible to list them in order by name. This makes the resulting display much easier to read and you can quickly find a particular property and value.
for (i = 0; i < propertyList.length; i++) { property = String(propertyList[i]); try { value = String(obj[propertyList[i]]); } catch (exception) { value = "<i>" + String(exception) + "</i>" } // ... display the property/value pair ...
Arrays and Collections
Here's an example of where browsers can differ. Although arrays and
collections are objects, what about the indexed elements? In Internet Explorer,
they show up as individual properties, obj.0, obj.1, obj.2, ...
so
nothing special needs to be done.
Netscape however, does not do this. For it, the script checks if the object
supports the index()
method and, if so, the individual items are
listed after all the other properties have been displayed.
if (isNS6 && obj.item) { for (j = 0; j < obj.length; j++) { objectList[objectList.length] = obj[j]; temp = makeLink(objectList.length - 1, name + "[" + j + "]", String(obj[j])); if (obj[j]) s += "<li>" + name + "[" + j + "] " + temp + "</li>"; } }
Creating the Dynamic View
As mentioned, any value that is a JavaScript object is displayed as a link.
Clicking on it calls a function named createList(),
passing it a
reference to the actual object.
The function in turn calls showProperties()
for that object to
generate an HTML list which is then inserted into the page just after the link
element that triggered it.
Clicking the link again calls destroyList()
which deletes the
HTML previously inserted.
The showProperties()
function makes these links as it checks
each object property. In order to track the objects, it uses a global array
called objectList.
As it finds objects, it adds them to the array,
using the array index value as a parameter to createList()
so that
function can find the proper object to expand.
Browser Notes
One thing you may notice is that IE appears to include every possible property an object can have, even if it's not explicitly set. You'll generally see a large number properties listed on each object, most with null values.
Netscape, on the other hand, seems to use less generic sets of properties for each object, adding others only if explicitly set via HTML or JavaScript code.
Bugs
Depending on the browser and version, an attempt to access some properties
may generate an error. The code uses JavaScript try
and
catch
statements to prevent this in most cases and will instead
display the exception message text.
Also, some objects do not provide enumeration of their properties and may not expand when clicked on. Again, this is entirely dependent on the particular browser and version.
On a final note, the script uses the innerHTML
property to
insert sublistings when expanding objects. This is not part of the current DOM
standard, and may or may not eventually be accepted, but it is currently
supported by both Netscape and IE and greatly simplifies the code.