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

如果标题是h4或者h5我就添加一个额外的类。

1　if　(toBeTOCced[i].nodeName　==　'H4')
2　　　　　tmp.className　+=　'　indent';
3　if　(toBeTOCced[i].nodeName　==　'H5')
4　　　　　tmp.className　+=　'　extraindent';

现在我们需要把a元素链接到他真正的标题上。这需要一个唯一的ID。然而，这些标题可能已经包含一个ID了。我不想破坏原有的内部链接，所以我更愿意使用标题本来的ID。只有当标题没有ID的时候我才创建一个新的ID。

1　var　headerId　=　toBeTOCced[i].id　||　'link'　+　i;

我们刚刚创建的链接的href属性就应该是#+headerId，标题本身也就有了一个ID。

1　tmp.href　=　'#'　+　headerId;
2　toBeTOCced[i].id　=　headerId;

一个特殊情况：如果标题是H2，那就是页面的顶部，也会得到一个ID。

1　　　　　if　(toBeTOCced[i].nodeName　==　'H2')　{
2　　　　　　　　　tmp.innerHTML　=　'Top';
3　　　　　　　　　tmp.href　=　'#top';
4　　　　　　　　　toBeTOCced[i].id　=　'top';
5　　　　　}
6　}

现在表格就生产了，我们返回给调用它的地方。

1　　　　　return　y;
2　}

显示和隐藏ToC

最后这个函数用了显示和隐藏ToC。非常的简单，先检测ToC的状态，然后根据信息生产一个新的文本和display值。

1　var　TOCstate　=　'none';
2　　
3　function　showhideTOC()　{
4　　　　　TOCstate　=　(TOCstate　==　'none')　?　'block'　:　'none';
5　　　　　var　newText　=　(TOCstate　==　'none')　?　'show　page　contents'　:　'hide　page　contents';
6　　　　　document.getElementById('contentheader').innerHTML　=　newText;
7　　　　　document.getElementById('innertoc').lastChild.style.display　=　TOCstate;
8　}

这个函数在用户点击<span>的时候调用，那样他就可以切换ToC的显示。另外当用户在链接上点击的时候也会马上隐藏ToC的。

翻译地址：http://www.quirksmode.org/dom/toc.html

文章出处：http://beiyu.cnblogs.com

编缉推荐阅读以下文章

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