JavaScript DOM学习第三章：内容表格

核心提示：如果你也想这么做，那么你还需要我的getElementByTagNames()函数，JavaScript DOM学习第三章：内容表格，代码01functioncreateTOC(){02vary=document.createElement('div');03y.id='innertoc'

如果你也想这么做，那么你还需要我的getElementByTagNames()函数。

代码

01　function　createTOC()　{
02　　　　　var　y　=　document.createElement('div');
03　　　　　y.id　=　'innertoc';
04　　　　　var　a　=　y.appendChild(document.createElement('span'));
05　　　　　a.onclick　=　showhideTOC;
06　　　　　a.id　=　'contentheader';
07　　　　　a.innerHTML　=　'show　page　contents';
08　　　　　var　z　=　y.appendChild(document.createElement('div'));
09　　　　　z.onclick　=　showhideTOC;
10　　　　　var　toBeTOCced　=　getElementsByTagNames('h2,h3,h4,h5');
11　　　　　if　(toBeTOCced.length　<　2)　return　false;
12　　
13　　　　　for　(var　i=0;i<toBeTOCced.length;i++)　{
14　　　　　　　　　var　tmp　=　document.createElement('a');
15　　　　　　　　　tmp.innerHTML　=　toBeTOCced[i].innerHTML;
16　　　　　　　　　tmp.className　=　'page';
17　　　　　　　　　z.appendChild(tmp);
18　　　　　　　　　if　(toBeTOCced[i].nodeName　==　'H4')
19　　　　　　　　　　　　　tmp.className　+=　'　indent';
20　　　　　　　　　if　(toBeTOCced[i].nodeName　==　'H5')
21　　　　　　　　　　　　　tmp.className　+=　'　extraindent';
22　　　　　　　　　var　headerId　=　toBeTOCced[i].id　||　'link'　+　i;
23　　　　　　　　　tmp.href　=　'#'　+　headerId;
24　　　　　　　　　toBeTOCced[i].id　=　headerId;
25　　　　　　　　　if　(toBeTOCced[i].nodeName　==　'H2')　{
26　　　　　　　　　　　　　tmp.innerHTML　=　'Top';
27　　　　　　　　　　　　　tmp.href　=　'#top';
28　　　　　　　　　　　　　toBeTOCced[i].id　=　'top';
29　　　　　　　　　}
30　　　　　}
31　　　　　return　y;
32　}
33　　
34　var　TOCstate　=　'none';
35　　
36　function　showhideTOC()　{
37　　　　　TOCstate　=　(TOCstate　==　'none')　?　'block'　:　'none';
38　　　　　var　newText　=　(TOCstate　==　'none')　?　'show　page　contents'　:　'hide　page　contents';
39　　　　　document.getElementById('contentheader').innerHTML　=　newText;
40　　　　　document.getElementById('innertoc').lastChild.style.display　=　TOCstate;
41　}

编缉推荐阅读以下文章

• JavaScript DOM学习第六章：表单实例
• JavaScript DOM学习第五章：表单简介
• JavaScript DOM学习第四章：getElementByTagNames
• JavaScript DOM学习第二章：编辑文本
• JavaScript DOM学习第一章：W3C DOM简介
• javaScript DOM方法与属性摘要