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一个生成文档目录的实例的更多相关文章
- 前端那点事儿——Tocify自动生成文档目录
今天偶然间看到文档服务器有一个动态目录功能,点击目录能跳转到指定的位置:窗口滑动也能自动更新目录的焦点. 效果 框架 原来使用的是一个开源的jquery-ui控件——tocify.js,它可以遍历页面 ...
- JavaScript 定义类的最佳写法——完整支持面向对象(封装、继承、多态),兼容所有浏览器,支持用JSDuck生成文档
作者: zyl910 [TOC] 一.缘由 由于在ES6之前,JavaScript中没有定义类(class)语法.导致大家用各种五花八门的办法来定义类,代码风格不统一.而且对于模拟面向对象的三大支柱& ...
- JavaScript 实现命名空间(namespace)的最佳方案——兼容主流的定义类(class)的方法,兼容所有浏览器,支持用JSDuck生成文档
作者: zyl910 一.缘由 在很多的面向对象编程语言中,我们可以使用命名空间(namespace)来组织代码,避免全局变量污染.命名冲突.遗憾的是,JavaScript中并不提供对命名空间的原生支 ...
- 使用Ldoc给Lua生成文档
Ldoc介绍 LDoc是一个Lua的文档生成工具,过去,比较常用的Lua生成文档的工具是LuaDoc,可惜作者自从2008年之后就再也没有发布过新的版本了,说明作者基本上已经放弃维护了.而LDoc则是 ...
- C#依据word模版动态生成文档
新生开学,各院系辅导员代领校园卡.需要打印一份领取卡的协议,协议模版固定,但各院系卡的数量不同.需要从excel表格中抽取数据往word文件中填,同事咨询是否可以用word中的邮件合并功能,心想有这功 ...
- 使用 Swagger 自动生成 ASP.NET Core Web API 的文档、在线帮助测试文档(ASP.NET Core Web API 自动生成文档)
对于开发人员来说,构建一个消费应用程序时去了解各种各样的 API 是一个巨大的挑战.在你的 Web API 项目中使用 Swagger 的 .NET Core 封装 Swashbuckle 可以帮助你 ...
- xcode 自动添加注释,生成文档
一.自动生成注释代码 添加一个快捷键,生成 注释代码 ThisService 下载连接:http://wafflesoftware.net/thisservice/ ...
- newlisp 注释生成文档
最近写了一个newlisp_armory库,用来实现一些newlisp自身不支持的操作.比如跨windows和ubuntu的目录拷贝功能等. 自己用的时候,发现没有API reference文档参考, ...
- eoLinker 新功能发布,增加了识别代码注释自动生成文档功能
产品地址:https://www.eolinker.com开源代码:https://www.eolinker.com/#/os/download在线生成代码注释工具:http://tool.eolin ...
随机推荐
- python爬虫从入门到放弃(四)之 Requests库的基本使用
什么是Requests Requests是用python语言基于urllib编写的,采用的是Apache2 Licensed开源协议的HTTP库如果你看过上篇文章关于urllib库的使用,你会发现,其 ...
- oracle配置odbc数据源
今天配置oracle数据源心得: 1.需安装oracle客户端,若校验报错,将杀毒软件全部退出之后再重新安装: 2.安装完成后,运行odbcad32(64位),在odbc界面可找到相应驱动: 3.客户 ...
- 从Thread,ThreadPool,Task, 到async await 的基本使用方法解读
记得很久以前的一个面试场景: 面试官:说说你对JavaScript闭包的理解吧? 我:嗯,平时都是前端工程师在写JS,我们一般只管写后端代码. 面试官:你是后端程序员啊,好吧,那问问你多线程编程的问题 ...
- 纯CSS3向右循环闪过效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- PHP cURL的详细使用手册
PHP cURL的详细使用手册 PHP cURL可以帮助我们简单有效地去抓取网页内容,帮助我们方便的实现抓取功能.本文主要介绍了PHP cURL的使用方法. AD:2013云计算架构师峰会课程资料下载 ...
- [HDU1002] A + B Problem II
Problem Description I have a very simple problem for you. Given two integers A and B, your job is to ...
- jQuery链式操作如何返回上一级DOM
有时候我们在链式操作的时候,选择到了其他的DOM进行操作,如何再返回先前的dom呢,有一下几个方法,end(); addBack(); add(); 使用形式 $("#divFather&q ...
- weather API 天气api接口 收集整理
腾讯 http://sou.qq.com/online/get_weather.php?callback=Weather&city=南京 中国天气-weather.com.cn http:// ...
- 不再迷惑,无值和NULL值的转换
在关系型数据库的世界中,无值和NULL值的区别是什么?一直被这个问题困扰着,甚至在写TSQL脚本时,心有戚戚焉,害怕因为自己的一知半解,挖了坑,贻害后来人,于是,本着上下求索,不达通幽不罢休的决心(开 ...
- 增强for循环用法
1.首先增强for循环和iterator遍历的效果是一样的,也就说增强for循环的内部也就是调用iteratoer实现的, 但是增强for循环有些缺点,例如不能在增强循环里动态的删除集合内容.不能获取 ...