javascript之小应用-自动生成目录 -

Lixh1986

浏览: 1090522 次

最近访客更多访客>>

Z865785437029

akingde

ningzong

蕃薯耀

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

javascript之小应用-自动生成目录

博客分类：

javaScript

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> 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");
                        anchor.name = "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);
                    }
                };
        
          //  window.onload = toc;

        </script>
    </head>
    <body>
         <h1>h1</h1>
         <h2>h2</h2>
         
         <h1>h1</h1>
         <h2>h2</h2>
         <h2>h2</h2>
         
         <h1>h1</h1>
         
         <h1>h1</h1>         
         <h2>h2</h2>
         <h2>h2</h2>
         
         <h1>h1</h1>
         <h2>h2</h2>
         
         <input type="button" value="Click Me" onclick= "toc();"/>
         
         
    </body>
</html>

点击 Click Me 之前：