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.

Prev