Example: Generating a Table of Contents
Example 15-7 shows how to dynamically create a
table of contents for a document. It demonstrates many of the document
scripting concepts described in the sections above: element selection,
document traversal, setting element attributes, setting the
innerHTML property, and creating new nodes
and inserting them into the document. The example is well-commented
and you should have no trouble following the code.
Example 15-7. An automatically generated table of contents
* TOC.js: create a table of contents for a document.
* This module registers an anonymous function that runs automatically
* when the document finishes loading. When it runs, the function first
* looks for a document element with an id of "TOC". If there is no
* such element it creates one at the start of the document.
* Next, the function finds all <h1> through <h6> tags, treats them as
* section titles, and creates a table of contents within the TOC
* element. The function adds section numbers to each section heading
* and wraps the headings in named anchors so that the TOC can link to
* them. The generated anchors have names that begin with "TOC", so
* you should avoid this prefix in your own HTML.
* The entries in the generated TOC can be styled with CSS. All entries have
* a class "TOCEntry". Entries also have a class that corresponds to the level
* of the section heading. <h1> tags generate entries of class "TOCLevel1",
* <h2> tags generate entries ...