此文记录在编写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:熟悉API2:正则表达式
3:高亮当前项
4:平滑滚动
5:关注兼容性