Navigating in the Document Outline Window

Microsoft Script Editor

Navigating in the Document Outline Window

While you are editing an HTML page, the Document Outline window displays a nested, hierarchical view of the elements and scripts on your page. You can scroll through the outline, collapse and expand entries, and double-click items to navigate quickly to their location in your document.

Note   To open the Document Outline window, point to Other Windows on the View menu and click Document Outline. Click the plus (+) sign next to a node to list all the items within the node. A minus (-) sign indicates that a node is already fully expanded. Click the minus (-) sign to collapse the node.

To jump to an element in Design View

  • In the Document Outline window, double-click any element listed in the expanded <BODY> outline.

    In the document window, the insertion point jumps to that element.

To open the Document Outline window in Script Outline view.

  1. Open your page in HTML View.
  2. Point to Other Windows and click Document Outline.

    The Document Outline window opens in Script Outline view. The available outlines displayed include Client Objects & Events and Client Scripts.

To jump to an event handler call in the <BODY> of your page

  1. Open the Document Outline window in Script Outline view.
  2. Expand the Client Scripts outline.
  3. Double-click any object.event item listed.

    The insertion point jumps to the event handler call for this event in the markup for the element named.

To jump to an existing handler function in a <SCRIPT>

  1. Open the Document Outline window in Script Outline view.
  2. Expand the Client Scripts outline.
  3. Click the desired script to expand its list of functions.

    Scripts included in the Client Scripts outline are named for their scripting language.

  4. Double-click any function and the insertion point jumps to that function.

To insert a new blank handler function into a <SCRIPT>

  1. Open the Document Outline window in Script Outline view.
  2. Expand the Client Objects & Events outline.
  3. Double-click an object to expand the list of its available events.

    Events for which you already have a handler function are formatted bold.

  4. Double-click an event that is not bold.

    This inserts a new blank function that will handle the event.

    Note   This new handler function is added to a script in the <HEAD> of your page whose ID property includes "clientEventHandlers." For example:

    <SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>

    If such a script does not already exist, one will be created.

  5. Complete the new event handler function you've just added.