DaisyField→Web Tools
	DOMpeeper Help User Manual for DaisyField  DOMpeeper

Contents:

• Starting DOMpeeper
• Using DOMpeeper
• What expressions can you evaluate?
• How does DOMpeeper work?

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:

• In the top section, there is a headings row followed by a row containing the expression you entered, along with its type, and a string representation of its value.
• In the bottom section, there is a headings row followed by one line for each member of the object represented by your expression.  If the object has no members that can be discovered by using the JavaScript "in" operator, then the bottom section of the output table is blank except for the headings row.

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:

• 10 + 2 * 3
• Math.PI
• "Some string".length
• [100,-1,200,17]

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:

• var x=5; var y=10; x*y
• var g=(1+Math.sqrt(5))/2 ; var x=10 ; g*x
• var a=[3,-123,200] ; a[6]=-1; a

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

• alert("Hello, world!")
• document.body.style.backgroundImage="none"
• window.open() (opens a blank browser window)

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: