JavaScript一个生成文档目录的实例
Posted newAdmin
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript一个生成文档目录的实例相关的知识，希望对你有一定的参考价值。
执行结果：
<body> <script type="text/javascript"> /** * 这个模块注册一个可在页面加载完成后自动运行的匿名函数，当执行这个函数时会去文档中查找 * id为‘TOC\'的元素，如果这个元素不存在，就创建一个元素 * * 生成的TOC目录应当具有自己的CSS样式，整个目录区域的样式className设置为“TOCEntry” * 同样我们为不同层级的目录标题定义不同的样式，<h1>标签生成标题 * className为“TOCLevel1”，<h2>标签生成的标题className为“TOCLevel2”，以此类推 * 段编号的样式为"TOCSectNum" * * css代码的随后一行表示每个段编号之后都会有一个冒号和空格符，若要隐藏段编号， * 请使用这行代码： * .TOCSectNum{display:none;} * * 这个模块需要onLoad（）工具函数 */ window.onload = (function(){ //匿名函数定义了一个局部作用域 //查找TOC容器元素 //如果不存在，则在文档开头处创建一个 var toc = document.getElementById(\'TOC\'); if(!toc){ toc = document.createElement("div"); toc.id = "TOC"; document.body.insertBefore(toc,document.body.firstChild); } //查找所有标题元素 var headings; if(document.querySelectorAll){ headings = document.querySelectorAll("h1,h2,h3,h4,h5,h6"); }else{ //否则，查找方法稍微麻烦一些 headings = findHeadins(document.body,[]); } //递归遍历document的body,查找标题元素 function findHeadins(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 findHeadins(c,sects); } return sects; } //初始化一个数组来保持跟踪章节号 var sectioinNumbers = [0,0,0,0,0,0]; //现在，循环已找到的标题元素 for(var h = 0 ; h < headings.length ; h++ ){ var heading = headings[h]; //跳过在TOC容器中的标题元素 if(heading.parentNode == toc ) continue; //判定标题的级别 var level = parseInt( heading.tagName.charAt(1)); if( isNaN( level ) || level < 1 || level > 6 ) continue; //对于该标题级别增加sectionNumbers对应的数字 //重置所有标题比级别低的数字为零 sectioinNumbers[level-1]++; for(var i = level; i<6 ; i++) sectioinNumbers[i] =0; //现在，将所有标题级别的章节号组合产生一个章节号 如；2.3.1 var sectioinNumber = sectioinNumbers.slice(0,level).join("."); //位标题级别增加章节号 //把数字放在<span>中，使得其可以用样式修饰 var span = document.createElement("span"); span.className = "TOCSectNum"; span.innerhtml = sectioinNumber ; heading.insertBefore(span , heading.firstChild); //用命名的锚点将标题包起来，以便为它增加链接 var anchor = document.createElement("a"); anchor.name = "TOC"+sectioinNumber; heading.parentNode.insertBefore(anchor , heading); anchor.appendChild(heading); //现在为该节点创建一个链接 var link = document.createElement("a"); link.href = "#TOC"+sectioinNumber; //链接的目标地址 link.innerHTML = heading.innerHTML; //链接文本与标题一致 //将链接放在一个div中，div用基于级别的名字的样式修饰 var entry = document.createElement(\'div\'); entry.className = "TOCEntry TOCLevel"+level; entry.appendChild(link); //该div添加到TOC容器中 toc.appendChild(entry); } }); </script> <h1>这是h1</h1> <h2>这是h2</h2> <h3>这是h3</h3> <h1>这是h1</h1> <h4>这是h4</h4> <h5>这是h5</h5> <h6>这是h6</h6> </body>
以上是关于JavaScript一个生成文档目录的实例的主要内容，如果未能解决你的问题，请参考以下文章
Spring Rest 文档。片段生成时 UTF-8 中间字节无效 [重复]