此文记录在编写TOC（table of content ）插件的过程中所遇到的问题与知识点。 我能够完成生成所有Header标题的目标，但大多数只有二级标题的方法。文章从两个标题的生成到所有标题的生成深入，分为多个方法。

草稿：https://www.zybuluo.com/lwxyfer/note/210913

来自stackoverflow：

http://stackoverflow.com/questions/187619/is-there-a-javascript-solution-to-generating-a-table-of-contents-for-a-page

注意学习其中的正则，replace()

演示

暴力缩进：

扩展： http://www.quirksmode.org/dom/getElementsByTagNames.html

实现： http://www.quirksmode.org/dom/toc.html

但最后有个东西叫 querySelectorAll() 这是新出的HTML5的api，好吧，可以看出，我对HTML5还是不是很熟悉啊。

这个方法就是简单的获取所有需要的Header 然后加css缩进即可。

演示

html标签缩进： http://www.cnblogs.com/xdp-gacl/p/3718879.html

此法利用DD DT

完美生成TOC：

https://github.com/idiotWu/jQuery-TOC

有JQuery 和 纯JS的方法

生成的DOM结构很完美。

演示

TODO：

1：熟悉API

2：正则表达式

3：高亮当前项

4：平滑滚动

5：关注兼容性