Share via

Document Outline Window

  • Article

Provides a nested, outline view of elements and scripts in the current document. In both Design view and HTML view, you can open the Document Outline window from the Other Windows list in the View menu. This window provides an easy way to find and select elements on your page, and also helps you gain a better understanding of the logical structure of your document. You can expand and collapse entries as you scroll through the outline. Double-click any element listed to find and select it in the editor.

HTML Outline View

Displays a hierarchical outline of the elements within the <BODY> of the document. When you double-click any element, the insertion point in the HTML View editor jumps to that element in the markup of your page.

Note   To open the Document Outline window in HTML Outline view, first open an HTML page in either Design view or HTML view. Then select Other Windows from the View menu and choose Document Outline from the submenu.

If your Web page includes scripts, you will see <SCRIPT> nodes in the HTML Outline. To expand these nodes and list script functions and the objects and events they handle, you must select Show Script Only from the View menu to toggle the Document Outline window to Script Outline view.

Script Outline View

Displays two hierarchical outlines of script-related elements on your Web page, named Client Objects & Events and Client Scripts. Expand the Client Objects & Events outline to list the available objects on your page. Expand the Client Scripts outline to list the scripts included on your page, followed by the objects and events their functions handle.

Note   To open the Document Outline window in Script Outline view, first open an HTML page that includes scripts in HTML view. Select Show Script Only from the View menu, select Other Windows from the View menu, and then choose Document Outline.

  • Client Objects & Events
    The Client Objects & Events outline lists the available objects on your page. Double-click any object to view a list of its available events. Double-click any event to insert a new blank function that will handle the event selected. This new handler function is added to a clientEventHandlers script in the <HEAD> of your page. If a script whose id includes the string clientEventHandlers does not already exist there, one will be created:

    <SCRIPT id=clientEventHandlersJS language=javascript>

    In the Client Objects & Events outline, names of events for which you already have a handler function in your clientEventHandlers script appear in bold. When you double-click a bolded event, the insertion point in the HTML View editor jumps to that handler function in its script.

  • Client Scripts
    The Client Scripts outline lists the scripts included on your page. Expand any script node to list its functions. When you double-click any function listed, the insertion point in the HTML editor jumps to that handler function in the <SCRIPT> named.

    The objects and events handled by your functions are then listed. Their names are given in object.event order. For example, suppose a <FORM> on your page includes a button named bGet, and that the markup for this particular button includes a call to a function named goGet() that runs when the button is clicked:

    <INPUT type="button" NAME="bGet" ID="bGet" VALUE="GET" onClick="goGet(...)>

    In this case, the bGet.onClick event will be listed in the Client Scripts outline. When you double-click an object.event item, the insertion point in the HTML Editor jumps to the exact point within the markup for the element named where the handler function for this event is called. In the previous example, when you click the bget.onClick event in the Client Scripts outline, the insertion point in the HTML View editor jumps to onClick="goGet(...)" in the <INPUT> element for the bGet button.

    Tip   Use the Client Scripts outline to locate the markup for function calls quickly in the <BODY> of your page.

See Also

Navigating in the Document Outline Window | Navigating in HTML Designer | Browsing Code and Components | Outlining and Hiding Code | Setting the defaultClientScript Property of an HTML Document | Event Handling in HTML Elements Sample | Design View, HTML Designer | HTML View, HTML Designer | DHTML References