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

解释

这段代码运行如下：

准备阶段

首先我创建一个<div id="innertoc">来放置表格内容

1　function　createTOC()　{
2　　　　　var　y　=　document.createElement('div');
3　　　　　y.id　=　'innertoc';

然后在他的上面添加一个<span>标签。点击这个元素就会运行showhideTOC()函数，我会在下面解释。

1　var　a　=　y.appendChild(document.createElement('span'));
2　a.onclick　=　showhideTOC;
3　a.id　=　'contentheader';
4　a.innerHTML　=　'show　page　contents';

然后我再创建一个DIV用了放置真正的链接。在这个div上单击（真正的含义是：在这个div里的任何一个链接上单击）一样会触发showhideTOC()函数。

1　var　z　=　y.appendChild(document.createElement('div'));
2　z.onclick　=　showhideTOC;

得到标题

然后新建一个toBeTOCced数组，再用我的getElementByTagNames()函数来得到整个页面的左右标题。

1　var　toBeTOCced　=　getElementsByTagNames('h2,h3,h4,h5');

如果数组里只有一个元素（比如这个页面只有一个h2标题）就停止。我不想让ToC只有一个元素。

创建ToC

现在开始创建ToC。首先遍历toBeTOCced数组。对于每个元素我都创建一个和他们的标题相同的链接。注意innerHTML的使用：网站里有些标题包含<code>这样的HTML标签，我也想让这些在ToC里面显示。我把这些新的链接添加在ToC的里面的<div> 上。

1　for　(var　i=0;i<toBeTOCced.length;i++)　{
2　　　　　var　tmp　=　document.createElement('a');
3　　　　　tmp.innerHTML　=　toBeTOCced[i].innerHTML;
4　　　　　tmp.className　=　'page';
5　　　　　z.appendChild(tmp);

编缉推荐阅读以下文章

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