执行结果：

<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一个生成文档目录的实例的更多相关文章

  1. 前端那点事儿——Tocify自动生成文档目录

    今天偶然间看到文档服务器有一个动态目录功能,点击目录能跳转到指定的位置:窗口滑动也能自动更新目录的焦点. 效果 框架 原来使用的是一个开源的jquery-ui控件——tocify.js,它可以遍历页面 ...

  2. JavaScript 定义类的最佳写法——完整支持面向对象（封装、继承、多态），兼容所有浏览器，支持用JSDuck生成文档

    作者: zyl910 [TOC] 一.缘由 由于在ES6之前,JavaScript中没有定义类(class)语法.导致大家用各种五花八门的办法来定义类,代码风格不统一.而且对于模拟面向对象的三大支柱& ...

  3. JavaScript 实现命名空间（namespace）的最佳方案——兼容主流的定义类（class）的方法，兼容所有浏览器，支持用JSDuck生成文档

    作者: zyl910 一.缘由 在很多的面向对象编程语言中,我们可以使用命名空间(namespace)来组织代码,避免全局变量污染.命名冲突.遗憾的是,JavaScript中并不提供对命名空间的原生支 ...

  4. 使用Ldoc给Lua生成文档

    Ldoc介绍 LDoc是一个Lua的文档生成工具,过去,比较常用的Lua生成文档的工具是LuaDoc,可惜作者自从2008年之后就再也没有发布过新的版本了,说明作者基本上已经放弃维护了.而LDoc则是 ...

  5. C#依据word模版动态生成文档

    新生开学,各院系辅导员代领校园卡.需要打印一份领取卡的协议,协议模版固定,但各院系卡的数量不同.需要从excel表格中抽取数据往word文件中填,同事咨询是否可以用word中的邮件合并功能,心想有这功 ...

  6. 使用 Swagger 自动生成 ASP.NET Core Web API 的文档、在线帮助测试文档（ASP.NET Core Web API 自动生成文档）

    对于开发人员来说,构建一个消费应用程序时去了解各种各样的 API 是一个巨大的挑战.在你的 Web API 项目中使用 Swagger 的 .NET Core 封装 Swashbuckle 可以帮助你 ...

  7. xcode 自动添加注释，生成文档

    一.自动生成注释代码        添加一个快捷键,生成 注释代码        ThisService 下载连接:http://wafflesoftware.net/thisservice/     ...

  8. newlisp 注释生成文档

    最近写了一个newlisp_armory库,用来实现一些newlisp自身不支持的操作.比如跨windows和ubuntu的目录拷贝功能等. 自己用的时候,发现没有API reference文档参考, ...

  9. eoLinker 新功能发布，增加了识别代码注释自动生成文档功能

    产品地址:https://www.eolinker.com开源代码:https://www.eolinker.com/#/os/download在线生成代码注释工具:http://tool.eolin ...

随机推荐

  1. 每天一道Java题[10]

    题目 阐述创建线程最常用的两种方法及其对比. 解答 方法一:继承Thread类实现 步骤: 创建Thread类的子类,如MyThread. 重写Thread类的run()方法. 实例化MyThread ...

  2. Images as x-axis labels

    Open-source software is awesome. If I found that a piece of closed-source software was missing a fea ...

  3. 以太坊RLP用法-go-ethereum学习

    RLP (递归长度前缀)提供了一种适用于任意二进制数据数组的编码,RLP已经成为以太坊中对对象进行序列化的主要编码方式.RLP的唯一目标就是解决结构体的编码问题:对原子数据类型(比如,字符串,整数型, ...

  4. VR全景智慧城市，完美的将虚拟与现实结合

    很多人都粗浅的认为,VR虚拟智慧城市只是简单的将智慧城市和虚拟现实相结合的产物,这样的VR虚拟智慧城市看起来更像是个VR内容产品,而非城市建设成果.但是我们换个角度来思考的话,现在很多VR虚拟智慧城市 ...

  5. JS闭包，以及适用场景

    闭包的定义 不用解释了,网上到处都是.简单的说:一个定义在函数内部的函数与包含它的外部函数构成了闭包,内部函数可以访问外部函数的变量,这些变量将一直保存在内存中,直到无法再引用这个内部函数 举个例子: ...

  6. javascript代码的小小重构

    写js也有那么段时间了,也看过几本关于js的书,从最初的<锋利的jquery><高性能javasrcipt>到<javascript设计模式>等,虽然看了些书,看到 ...

  7. JAVA设计模式初探之装饰者模式

    定义:动态给一个对象添加一些额外的职责,就象在墙上刷油漆.使用Decorator模式相比用生成子类方式达到功能的扩充显得更为灵活.设计初衷:通常可以使用继承来实现功能的拓展,如果这些需要拓展的功能的种 ...

  8. 转发：Ubuntu软件卸载安装的命令

    说明:由于图形化界面方法(如Add/Remove... 和Synaptic Package Manageer)比较简单,所以这里主要总结在终端通过命令行方式进行的软件包安装.卸载和删除的方法. 一.U ...

  9. 快来领取一场专门讲解UTF-8与UTF-16编码算法的GitChat活动的免费名额

    微信扫一扫,可打开该GitChat活动页面 字符编码是计算机世界里最基础.最重要.最令人困惑的一个主题之一.不过,在计算机教材中却往往浮光掠影般地草草带过,甚至连一本专门进行深入介绍的专著都找不到(对 ...

  10. socket套接字编程

    一.概述 1.socket是一种进程间通信方式,既可以用于一台机器,也可以用于网络.常用语C/S模型. 2.可以跨越Windows和Linux操作系统,可以跨越不同语言. 3.注意网络字节序和主机字节 ...