SiteExperts.com Logo Home | Community | Developer's Paradise | Jobs
User Groups | Site Tools | Site Information | Search

Inside Technique : Part II - W3C DOM Table of Contents
By Scott Isaacs

In Part II we continue our look at dynamically creating a table of contents using the W3C Document Object Model recommendation. In our first article (recommended reading for this article), we showed how to enumerate all the headers in the document and insert a static table of contents at the top of the document. We introduced you to the W3C methods for manipulating the HTML tree. We are now going to enhance our original script and make the table of contents live. When you click on an item in the table of contents, you will automatically be taken to the contents location in the document.

As in our original article, our approach uses W3C recommended standards and runs in Internet Explorer 5.0 and Netscape's Gecko Developer preview demonstrating that cross-browser standards-based scripting is becoming a possibility.

Enhancing our original script is extremely simple. We make the table of contents live by inserting anchors at each header (eg., <A ID="destination"></A>). We also wrap each table of contents entry with a link to the newly created anchor (eg., <A HREF="#destination">).

Next we show you how we enhanced our original script to add this support.

Page 1:Part II - W3C DOM Table of Contents
Page 2:Enhancing the Code
Page 3:Building the Tree
Page 4:The Script
Page 5:Demonstration (IE5/Gecko)