如果你也想这么做，那么你还需要我的getelementbytagnames()函数。
复制代码 代码如下:
function createtoc() {
    var y = document.createelement('div');
    y.id = 'innertoc';
    var a = y.appendchild(document.createelement('span'));
    a.onclick = showhidetoc;
    a.id = 'contentheader';
    a.innerhtml = 'show page contents';
    var z = y.appendchild(document.createelement('div'));
    z.onclick = showhidetoc;
    var tobetocced = getelementsbytagnames('h2,h3,h4,h5');
    if (tobetocced.length
    for (var i=0;i        var tmp = document.createelement('a');
        tmp.innerhtml = tobetocced[i].innerhtml;
        tmp.classname = 'page';
        z.appendchild(tmp);
        if (tobetocced[i].nodename == 'h4')
            tmp.classname += ' indent';
        if (tobetocced[i].nodename == 'h5')
            tmp.classname += ' extraindent';
        var headerid = tobetocced[i].id || 'link' + i;
        tmp.href = '#' + headerid;
        tobetocced[i].id = headerid;
        if (tobetocced[i].nodename == 'h2') {
            tmp.innerhtml = 'top';
            tmp.href = '#top';
            tobetocced[i].id = 'top';
        }
    }
    return y;
}
var tocstate = 'none';
function showhidetoc() {
    tocstate = (tocstate == 'none') ? 'block' : 'none';
    var newtext = (tocstate == 'none') ? 'show page contents' : 'hide page contents';
    document.getelementbyid('contentheader').innerhtml = newtext;
    document.getelementbyid('innertoc').lastchild.style.display = tocstate;
}
解释
这段代码运行如下：
准备阶段
首先我创建一个来放置表格内容
复制代码 代码如下:
function createtoc() {
var y = document.createelement('div');
y.id = 'innertoc';
然后在他的上面添加一个标签。点击这个元素就会运行showhidetoc()函数，我会在下面解释。
复制代码 代码如下:
var a = y.appendchild(document.createelement('span'));
a.onclick = showhidetoc;
a.id = 'contentheader';
a.innerhtml = 'show page contents';
然后我再创建一个div用了放置真正的链接。在这个div上单击（真正的含义是：在这个div里的任何一个链接上单击）一样会触发showhidetoc()函数。
复制代码 代码如下:
var z = y.appendchild(document.createelement('div'));
z.onclick = showhidetoc;
得到标题
然后新建一个tobetocced数组，再用我的getelementbytagnames()函数来得到整个页面的左右标题。
复制代码 代码如下:
var tobetocced = getelementsbytagnames('h2,h3,h4,h5');
如果数组里只有一个元素（比如这个页面只有一个h2标题）就停止。我不想让toc只有一个元素。
创建toc
现在开始创建toc。首先遍历tobetocced数组。对于每个元素我都创建一个和他们的标题相同的链接。注意innerhtml的使用：网站里有些标题包含这样的html标签，我也想让这些在toc里面显示。我把这些新的链接添加在toc的里面的上。
复制代码 代码如下:
for (var i=0;ivar tmp = document.createelement('a');
tmp.innerhtml = tobetocced[i].innerhtml;
tmp.classname = 'page';
z.appendchild(tmp);
如果标题是h4或者h5我就添加一个额外的类。
复制代码 代码如下:
if (tobetocced[i].nodename == 'h4')
tmp.classname += ' indent';
if (tobetocced[i].nodename == 'h5')
tmp.classname += ' extraindent';
现在我们需要把a元素链接到他真正的标题上。这需要一个唯一的id。然而，这些标题可能已经包含一个id了。我不想破坏原有的内部链接，所以我更愿意使用标题本来的id。只有当标题没有id的时候我才创建一个新的id。
复制代码 代码如下:
var headerid = tobetocced[i].id || 'link' + i;
我们刚刚创建的链接的href属性就应该是#+headerid，标题本身也就有了一个id。
复制代码 代码如下:
tmp.href = '#' + headerid;
tobetocced[i].id = headerid;
一个特殊情况：如果标题是h2，那就是页面的顶部，也会得到一个id。
复制代码 代码如下:
if (tobetocced[i].nodename == 'h2') {
tmp.innerhtml = 'top';
tmp.href = '#top';
tobetocced[i].id = 'top';
}
}
现在表格就生产了，我们返回给调用它的地方。
复制代码 代码如下:
return y;}
显示和隐藏toc
最后这个函数用了显示和隐藏toc。非常的简单，先检测toc的状态，然后根据信息生产一个新的文本和display值。
复制代码 代码如下:
var tocstate = 'none';
function showhidetoc() {
tocstate = (tocstate == 'none') ? 'block' : 'none';
var newtext = (tocstate == 'none') ? 'show page contents' : 'hide page contents';
document.getelementbyid('contentheader').innerhtml = newtext;
document.getelementbyid('innertoc').lastchild.style.display = tocstate;
}
这个函数在用户点击的时候调用，那样他就可以切换toc的显示。另外当用户在链接上点击的时候也会马上隐藏toc的。
翻译地址：http://www.quirksmode.org/dom/toc.html
转载请保留以下信息
作者：北玉(tw:@rehawk)