JavaScript: The Definitive Guide, Sixth Editio javaScript权威指南(第6版) pdf 文字版-文字版, javascript电子书, 和javascript 有关的电子书:

15.7 Example: Generating a Table of Contents

15.7 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


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.

15.7 Example: Generating a Table of Contents | 387


*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.

tags generate entries of class "TOCLevel1",*

tags generate entries of class "TOCLevel2", and so on. Section numbers*inserted into headings have class "TOCSectNum". **You might use this module with a stylesheet like this: **#TOC { border: solid black 1px; margin: 10px; padding: 10px; }*.TOCEntry { font-family: sans-serif; }*.TOCEntry a { text-decoration: none; }*.TOCLevel1 { font-size: 16pt; font-weight: bold; }*.TOCLevel2 { font-size: 12pt; margin-left: .5in; }*.TOCSectNum:after { content: ": "; } **That final line generates a colon and space after section numbers. To hide*the section numbers, use this: **.TOCSectNum { display: none } **This module requires the onLoad() utility function. **/

onLoad(function() { // Anonymous function defines a local scope // Find the TOC container element. // If there isn't one, create one at the start of the document. var toc = document.getElementById("TOC"); if (!toc) {

toc = document.createElement("div"); = "TOC"; document.body.insertBefore(toc, document.body.firstChild);


// Find all section heading elements var headings; if (document.querySelectorAll) // Can we do it the easy way?

headings = document.querySelectorAll("h1,h2,h3,h4,h5,h6"); else // Otherwise, find the headings the hard way headings = findHeadings(document.body, []);

// Recursively traverse the document body looking for headings function findHeadings(root, sects) {

for(var c = root.firstChild; c != null; c = c.nextSibling) { if (c.nodeType !== 1) continue; if (c.tagName.length == 2 && c.tagName.charAt(0) == "H")

sects.push(c); else

findHeadings(c, sects); } return sects;


// Initialize an array that keeps track of section numbers. var sectionNumbers = [0,0,0,0,0,0];

// Now loop through the section header elements we found.

for(var h = 0; h < headings.length; h++) { var heading = headings[h];

// Skip the section heading if it is inside the TOC container. if (heading.parentNode == toc) continue;

// Figure out what level heading it is. var level = parseInt(heading.tagName.charAt(1)); if (isNaN(level) || level < 1 || level > 6) continue;

// Increment the section number for this heading level // and reset all lower heading level numbers to zero. sectionNumbers[level-1]++; 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 = sectionNumbers.slice(0,level).join(".")

// Add the section number to the section header title. // We place the number in a to make it styleable. var span = document.createElement("span"); span.className = "TOCSectNum"; span.innerHTML = sectionNumber; heading.insertBefore(span, heading.firstChild);

// Wrap the heading in a named anchor so we can link to it. var anchor = document.createElement("a"); = "TOC"+sectionNumber; heading.parentNode.insertBefore(anchor, heading); anchor.appendChild(heading);

// Now create a link to this section. var link = document.createElement("a"); link.href = "#TOC" + sectionNumber; // Link destination link.innerHTML = heading.innerHTML; // Link text is same as heading

// Place the link in a div that is styleable based on the level. var entry = document.createElement("div"); entry.className = "TOCEntry TOCLevel" + level; entry.appendChild(link);

// And add the div to the TOC container. toc.appendChild(entry); } });

友情链接It题库(| 版权归yishouce.com所有| 友链等可联系|粤ICP备16001685号-1