DaisyFieldWeb Tools

DOMpeeper Help

User Manual for DaisyField  DOMpeeper


DOMpeeper is an HTML document that you can use as a tool for learning about the w3.org Document Object Model (DOM), and as an aid in developing and debugging dynamic web pages that use the DOM.  DOMpeeper itself is written in HTML and Javascript.  Your browser should be Internet Explorer 6 or Netscape Navigator 6, or a later version of these browsers.  DOMpeeper has not been tested with other browsers.

Starting DOMpeeper

Simply open the DOMpeeper page (dompeeper.htm) in your browser.

Using DOMpeeper

Inputting an expression

The DOMpeeper web page contains a text input control into which you may type any JavaScript expression.  After entering the expression, you press the "Explore" button (or press ENTER) to evaluate that expression and display results.  The two buttons to the right of the "Explore" button permit you to navigate forward and backward in the stack of expressions that have been entered and evaluated. 

Output table

Results are displayed in the output table appearing below the text input area.  The table has two sections:

Drill down

An object can have a member that is itself an object that has members. DOM Explorer provides an easy way to drill down into such structures. You do so by performing a left mouse click on a member row in the output table. For example, carry out these steps:

  1. Type window in the input area.
  2. Press the "Explore" button or press ENTER
  3. Do you see that the window object has a member called document?
  4. Left-click with the mouse on the row containing the word document in the left column.
  5. Notice that DOMpeeper has now evaluated the expression window.document, and notice that the window.document object contains a member called body.
  6. Left-click on the output row for body.
  7. DOMpeeper has now evaluated window.document.body. Notice that this object has a member called style.
  8. Left-click on the output row containing the style member, etc.

What expressions can you evaluate?

DOMpeeper is designed primarily to display information about DOM objects such as window.document.body.style. However DOMpeeper can evaluate any JavaScript expression and display its value. Try these simple examples:

In addition to simple expressions like the above, DOM Exporer can evaluate composite expressions consisting of several expressions separated by semicolons. In such a case, the value of the composite expression is the value of the final simple expression in the series. Here are some examples:

Evaluating an expression can have interesting side effects. (Of course, that's what the DOM is all about!) Try these:

How does DOMpeeper work?

DOMpeeper is written entirely in JavaScript and HTML, and is itself an example of a dynamic HTML document that uses the Document Object Model to transform itself in various ways.  The basic idea is to use the native JavaScript function eval() to do the expression evaluation, and to use a for (var m in obj){...} loop to find and process members of objects. Note that sometimes objects have properties that are not exposed to a for..in loop. Such properties are not found by DOMpeeper (sorry about that).  If you can open DOMpeeper, then you have access to all the program code by using the "View Source" feature in your browser.

See Also:

DaisyField ScriptCradle is similar in some ways to DOMpeeper , and has its own help file.  However, ScriptCradle has a different purpose: it is a tool for constructing and debugging JavaScript scripts that may contain many lines of code.  DOMpeeper , by contrast, is optimized to drill down into DOM objects and expose their members.