javascript之小应用-自动生成目录-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_3352/article/details/82552952

本文深入解析了JavaScript中对文档操作的多个关键概念，包括元素选取、遍历、创建、属性设置及插入节点元素等，并通过实例展示了点击按钮前后文档结构的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[b][color=green]这个例子描述了javascript对文档操作的很多概念：[/color][/b]

[color=green][b]·[/b][/color]元素选取
[color=green][b]·[/b][/color]文档遍历
[color=green][b]·[/b][/color]元素创建
[color=green][b]·[/b][/color]元素属性设置
[color=green][b]·[/b][/color]插入新的节点元素

<!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>

[color=green][b]点击 Click Me 之前：[/b][/color]
[img]http://dl2.iteye.com/upload/attachment/0091/9936/2f580e95-ef64-333a-9776-081b1ad9224d.png[/img]

[color=green][b]点击 Click Me 之后：[/b][/color]

[img]http://dl2.iteye.com/upload/attachment/0091/9938/f1d4ae41-bc7b-3263-9691-3a4dd6543d42.png[/img]

-