WebReference.com - Chapter 17 of JavaScript: The Definitive Guide (4th Ed), from O'Reilly & Associates (10/15) | WebReference

WebReference.com - Chapter 17 of JavaScript: The Definitive Guide (4th Ed), from O'Reilly & Associates (10/15)

To page 1To page 2To page 3To page 4To page 5To page 6To page 7To page 8To page 9current pageTo page 11To page 12To page 13To page 14To page 15
[previous] [next]

JavaScript: The Definitive Guide (4th Ed)

Example: A Dynamically Created Table of Contents

The previous sections showed how you can use the core DOM API to traverse, modify, and add content to a document. Example 17-8, at the end of this section, puts all these pieces together into a single longer example. The example defines a single method, maketoc( ), which expects a Document node as its single argument. maketoc( ) traverses the document, creates a table of contents (TOC) for it, and replaces the specified node with the newly created TOC. The TOC is generated by looking for <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> tags within the document and assuming that these tags mark the beginnings of important sections within the document. In addition to creating a TOC, the maketoc( ) function inserts named anchors (<a> elements with the name attribute set instead of the href attribute) before each section heading so that the TOC can link directly to each section. Finally, maketoc( ) also inserts links at the beginning of each section back to the TOC; when the reader reaches a new section, she can either read that section or follow the link back to the TOC and choose a new section. Figure 17-5 shows what a TOC generated by the maketoc( ) function looks like.

A dynamically created table of contents
Figure 17-5. A dynamically created table of contents

If you maintain and revise long documents that are broken into sections with <h1>, <h2>, and related tags, the maketoc( ) function may be of interest to you. TOCs are quite useful in long documents, but when you frequently revise a document it can be difficult to keep the TOC in sync with the document itself. The TOC for this book was automatically created by postprocessing the content of the book. maketoc( ) allows you to do something similar for your web documents. You can use the function in an HTML document like this one:

<script src="TOC.js"></script>  <!-- Load the maketoc(  ) function -->
<!-- Call the maketoc(  ) function when the document is fully loaded -->
<body onload="maketoc(document.getElementById('placeholder'))">
<!-- This span element will be replaced by the generated TOC -->
<span id="placeholder">Table Of Contents</span>
// ... rest of document goes here ... 

Another way to use the maketoc( ) function is to generate the TOC only when the reader requests it. You can do this by including a link (or button) that replaces itself with the generated TOC when the user clicks on it:

<a href="#" onclick="maketoc(this); return false;">Show Table Of Contents</a>

The code for the maketoc( ) function follows. This example is long, but it is well commented and uses techniques that have already been demonstrated. It is worth studying as a practical example of the power of the DOM API. Note that the maketoc( ) function relies on two helper functions. For modularity, these helper functions are defined inside maketoc( ) itself. This prevents the addition of extra unnecessary functions to the global namespace.

 * Create a table of contents for this document, and insert the TOC into
 * the document by replacing the node specified by the replace argument.
function maketoc(replace) {
    // Create a <div> element that is the root of the TOC tree
    var toc = document.createElement("div");
    // Set a background color and font for the TOC. We'll learn about
    // the style property in the next chapter.
    toc.style.backgroundColor = "white";
    toc.style.fontFamily = "sans-serif";
    // Start the TOC with an anchor so we can link back to it
    var anchor = document.createElement("a");  // Create an <a> node
    anchor.setAttribute("name", "TOC");        // Give it a name
    toc.appendChild(anchor);                   // Insert it
    // Make the body of the anchor the title of the TOC
    anchor.appendChild(document.createTextNode("Table Of Contents"));
    // Create a <table> element that will hold the TOC and add it 
    var table = document.createElement("table");
    // Create a <tbody> element that holds the rows of the TOC
    var tbody = document.createElement("tbody");
    // Initialize an array that keeps track of section numbers
    var sectionNumbers = [0,0,0,0,0,0];
    // Recursively traverse the body of the document, looking for sections
    // sections marked with <h1>, <h2>, ... tags, and use them to create 
    // the TOC by adding rows to the table
    addSections(document.body, tbody, sectionNumbers);
    // Finally, insert the TOC into the document by replacing the node
    // specified by the replace argument with the TOC subtree
    replace.parentNode.replaceChild(toc, replace);
    // This method recursively traverses the tree rooted at Node n, looking
    // looking for <h1> through <h6> tags, and uses the content of these tags
    // to build the table of contents by adding rows to the HTML table specified
    // by the toc argument. It uses the sectionNumbers array to keep track of
    // the current section number.
    // This function is defined inside of maketoc(  ) so that it is not
    // visible from the outside. maketoc(  ) is the only function exported
    // by this JavaScript module.
    function addSections(n, toc, sectionNumbers) {
        // Loop through all the children of n
        for(var m = n.firstChild; m != null; m = m.nextSibling) {
            // Check whether m is a heading element. It would be nice if we
            // could just use (m instanceof HTMLHeadingElement), but this is
            // not required by the specification and it does not work in IE.
            // Therefore, we must check the tagname to see if it is H1-H6.
            if ((m.nodeType == 1) &&  /* Node.ELEMENT_NODE */ 
                (m.tagName.length == 2) && (m.tagName.charAt(0) == "H")) {
                // Figure out what level heading it is
                var level = parseInt(m.tagName.charAt(1));
                if (!isNaN(level) && (level >= 1) && (level <= 6)) {
                    // Increment the section number for this heading level
                    // And reset all lower heading-level numbers to zero
                    for(var i = level; i < 6; i++) sectionNumbers[i] = 0;
                    // Now combine section numbers for all heading levels
                    // to produce a section number like "2.3.1"
                    var sectionNumber = "";
                    for(var i = 0; i < level; i++) {
                        sectionNumber += sectionNumbers[i];
                        if (i < level-1) sectionNumber += ".";
                    // Create an anchor to mark the beginning of this section
                    // This will be the target of a link we add to the TOC
                    var anchor = document.createElement("a");
                    anchor.setAttribute("name", "SECT"+sectionNumber);
                    // Create a link back to the TOC and make it a
                    // child of the anchor
                    var backlink = document.createElement("a");
                    backlink.setAttribute("href", "#TOC");
                    // Insert the anchor into the document right before the
                    // section header
                    n.insertBefore(anchor, m);
                    // Now create a link to this section. It will be added
                    // to the TOC below.
                    var link = document.createElement("a");
                    link.setAttribute("href", "#SECT" + sectionNumber);
                    // Get the heading text using a function defined below
                    var sectionTitle = getTextContent(m);
                    // Use the heading text as the content of the link
                    // Create a new row for the TOC
                    var row = document.createElement("tr");
                    // Create two columns for the row
                    var col1 = document.createElement("td");
                    var col2 = document.createElement("td");
                    // Make the first column right-aligned and put the section
                    // number in it
                    col1.setAttribute("align", "right");
                    // Put a link to the section in the second column
                    // Add the columns to the row, and the row to the table
                    // Modify the section header element itself to add
                    // the section number as part of the section title
                    m.insertBefore(document.createTextNode(sectionNumber+": "),
            else {  // Otherwise, this is not a heading element, so recurse
                addSections(m, toc, sectionNumbers);
    // This utility function traverses Node n, returning the content of
    // all Text nodes found and discarding any HTML tags. This is also
    // defined as a nested function, so it is private to this module.
    function getTextContent(n) {
        var s = '';
        var children = n.childNodes;
        for(var i = 0; i < children.length; i++) {
            var child = children[i];
            if (child.nodeType == 3 /*Node.TEXT_NODE*/) s += child.data;
            else s += getTextContent(child);
        return s;

Example 17-8: Automatically generating a table of contents

To page 1To page 2To page 3To page 4To page 5To page 6To page 7To page 8To page 9current pageTo page 11To page 12To page 13To page 14To page 15
[previous] [next]

Created: November 28, 2001
Revised: November 28, 2001

URL: http://webreference.com/programming/javascript/definitive/chap17/10.html