javascript 文档加载后根据标题动态生成目录 

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4    
  5     <script>
  6     
  7     
  8     /**
  9     * toc.js : 根据文档内容生成table
 10     *
 11     *    本模块注册一个当文档加载完成后会自动运行的匿名函数。
 12     *    改函数运行时首先查看文档中id为TOC的元素，如果没有找到
 13     *    则在文档开头创建它
 14     *
 15     *    接下来，函数寻找文档中所有的<h1>到<h6>标签，并将其当做章节标题，
 16     *    然后以此为内容在TOC元素中创建一个table。该函数为每一个章节标题编号
 17     *    并且为每一个h标签添加命名的描点，这样就可以通过点击TOC中table连接到对应章节。
 18     *    生成的锚点一TOC作为前缀，所以你应该在自己的HTML代码中避免使用这个前缀
 19     *
 20     *    生成的目录入口可以用css进行格式。所有的入口具有类标识"TOCEntry"，入口同时根据<h>
 21     *    的级别拥有对应的类标志，如<h1>对应类标识为"TOCLevel1",<h2>对应类标志为"TOCLevel2"。
 22     *    插入到头部的章节编号具有类标志"TOCSectNum"
 23     *
 24     *    你可以在本模块中使用如下样式表
 25     *    #TOC { border: solid black 1px; margin: 10px; padding: 10px; }
 26     *    .TOCEntry { font-family: sans-serif; }
 27     *    .TOCEntry a { text-decoration: none; }
 28     *    .TOCLevel1 { font-size: 16pt; font-weight: bold; }
 29     *    .TOCLevel2 { font-size: 12pt; margin-left: .5in; }
 30     *    .TOCSecNum:after { content: ": "; }
 31     *    
 32     */
 33 
 34     function toc()
 35     {
 36          // Find the TOC container element.
 37         // If there isn't one, create one at the start of the document.
 38         var toc = document.getElementById("TOC");
 39         if (!toc) {
 40             toc = document.createElement("div");
 41             toc.id = "TOC";
 42             document.body.insertBefore(toc, document.body.firstChild);
 43         }
 44         // Find all section heading elements
 45         var headings;
 46         if (document.querySelectorAll) // Can we do it the easy way?
 47             headings = document.querySelectorAll("h1,h2,h3,h4,h5,h6");
 48         else   // Otherwise, find the headings the hard way
 49             headings = findHeadings(document.body, []);
 50         // Recursively traverse the document body looking for headings
 51         function findHeadings(root, sects) {
 52             for(var c = root.firstChild; c != null; c = c.nextSibling) {
 53                 if (c.nodeType !== 1) continue;
 54                 if (c.tagName.length == 2 && c.tagName.charAt(0) == "H")
 55                     sects.push(c);
 56                 else 
 57                     findHeadings(c, sects);
 58             }
 59             return sects;
 60         }
 61         // Initialize an array that keeps track of section numbers.
 62         var sectionNumbers = [0,0,0,0,0,0];
 63         // Now loop through the section header elements we found.
 64       for(var h = 0; h < headings.length; h++) {
 65             var heading = headings[h];
 66             // Skip the section heading if it is inside the TOC container.
 67             if (heading.parentNode == toc) continue;
 68             // Figure out what level heading it is.
 69             var level = parseInt(heading.tagName.charAt(1));
 70             if (isNaN(level) || level < 1 || level > 6) continue;
 71             // Increment the section number for this heading level
 72             // and reset all lower heading level numbers to zero.
 73             sectionNumbers[level-1]++;
 74             for(var i = level; i < 6; i++) sectionNumbers[i] = 0;
 75             // Now combine section numbers for all heading levels
 76             // to produce a section number like 2.3.1.
 77             var sectionNumber = sectionNumbers.slice(0,level).join(".")
 78             // Add the section number to the section header title.
 79             // We place the number in a <span> to make it styleable.
 80             var span = document.createElement("span");
 81             span.className = "TOCSectNum";            
 82             span.innerHTML = sectionNumber;                
 83             heading.insertBefore(span, heading.firstChild);
 84             // Wrap the heading in a named anchor so we can link to it.
 85             var anchor = document.createElement("a");
 86             anchor.name = "TOC"+sectionNumber; 
 87             heading.parentNode.insertBefore(anchor, heading);
 88             anchor.appendChild(heading);
 89             // Now create a link to this section.
 90             var link = document.createElement("a");
 91             link.href = "#TOC" + sectionNumber; // Link destination
 92             link.innerHTML = heading.innerHTML; // Link text is same as heading
 93             // Place the link in a div that is styleable based on the level.
 94             var entry = document.createElement("div");
 95             entry.className = "TOCEntry TOCLevel" + level; 
 96             entry.appendChild(link);
 97             // And add the div to the TOC container.
 98             toc.appendChild(entry);
 99         }
100     }
101     
102         window.onload = toc;
103     </script>
104     
105     <style>
106     
107        #TOC { border: solid black 1px; margin: 10px; padding: 10px; }
108    .TOCEntry { font-family: sans-serif; }
109   .TOCEntry a { text-decoration: none; }
110  .TOCLevel1 { font-size: 16pt; font-weight: bold; }
111   .TOCLevel2 { font-size: 12pt; margin-left: .5in; }
112  .TOCSectNum:after { content: ": "; }
113 
114     
115     </style>
116     
117 </head>
118 
119 <body>
120 
121 <h1>h1</h1>
122 <h2>h2</h2>
123 <h1>h1</h1>
124 <h2>h2</h2><h2>h2</h2><h1>h1</h1>
125 <h1>h1</h1><h2>h2</h2><h2>h2</h2>
126 <h1>h1</h1><h2>h2</h2>
127 </body>
128 
129 </html>

 

posted @ 2013-08-01 11:09  我的百科全书  阅读(1364)  评论(0)    收藏  举报