javascript之小应用-自动生成索引-JavaSript-爱易网页

javascript之小应用-自动生成索引

日期：2014-05-16　浏览次数：20447 次

javascript之小应用-自动生成目录
这个例子描述了javascript对文档操作的很多概念：

·元素选取
·文档遍历
·元素创建
·元素属性设置
·插入新的节点元素

<!DOCTYPE html>
<html>
    <head>
         <style>
            #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: ": "; }
        </style>
         <script type="text/javascript">
            function  toc() { // 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.id = "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 <span

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

javascript之小应用-自动生成索引

相关资料更多>

推荐阅读更多>