如果你也想這么做，那么你還需要我的getElementByTagNames()函數(shù)。
復(fù)制代碼 代碼如下:
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 < 2) return false;

    for (var i=0;i<toBeTOCced.length;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;
}

解釋
這段代碼運(yùn)行如下：
準(zhǔn)備階段
首先我創(chuàng)建一個(gè)<div id="innertoc">來放置表格內(nèi)容
復(fù)制代碼 代碼如下:
function createTOC() {
var y = document.createElement('div');
y.id = 'innertoc';

然后在他的上面添加一個(gè)<span>標(biāo)簽。點(diǎn)擊這個(gè)元素就會(huì)運(yùn)行showhideTOC()函數(shù)，我會(huì)在下面解釋。
復(fù)制代碼 代碼如下:
var a = y.appendChild(document.createElement('span'));
a.onclick = showhideTOC;
a.id = 'contentheader';
a.innerHTML = 'show page contents';

然后我再創(chuàng)建一個(gè)DIV用了放置真正的鏈接。在這個(gè)div上單擊（真正的含義是：在這個(gè)div里的任何一個(gè)鏈接上單擊）一樣會(huì)觸發(fā)showhideTOC()函數(shù)。
復(fù)制代碼 代碼如下:
var z = y.appendChild(document.createElement('div'));
z.onclick = showhideTOC;

得到標(biāo)題
然后新建一個(gè)toBeTOCced數(shù)組，再用我的getElementByTagNames()函數(shù)來得到整個(gè)頁(yè)面的左右標(biāo)題。
復(fù)制代碼 代碼如下: var toBeTOCced = getElementsByTagNames('h2,h3,h4,h5');
如果數(shù)組里只有一個(gè)元素（比如這個(gè)頁(yè)面只有一個(gè)h2標(biāo)題）就停止。我不想讓ToC只有一個(gè)元素。

創(chuàng)建ToC
現(xiàn)在開始創(chuàng)建ToC。首先遍歷toBeTOCced數(shù)組。對(duì)于每個(gè)元素我都創(chuàng)建一個(gè)和他們的標(biāo)題相同的鏈接。注意innerHTML的使用：網(wǎng)站里有些標(biāo)題包含<code>這樣的HTML標(biāo)簽，我也想讓這些在ToC里面顯示。我把這些新的鏈接添加在ToC的里面的<div>上。

復(fù)制代碼 代碼如下:
for (var i=0;i<toBeTOCced.length;i++) {
var tmp = document.createElement('a');
tmp.innerHTML = toBeTOCced[i].innerHTML;
tmp.className = 'page';
z.appendChild(tmp);


如果標(biāo)題是h4或者h(yuǎn)5我就添加一個(gè)額外的類。
復(fù)制代碼 代碼如下:
if (toBeTOCced[i].nodeName == 'H4')
tmp.className += ' indent';
if (toBeTOCced[i].nodeName == 'H5')
tmp.className += ' extraindent';

現(xiàn)在我們需要把a(bǔ)元素鏈接到他真正的標(biāo)題上。這需要一個(gè)唯一的ID。然而，這些標(biāo)題可能已經(jīng)包含一個(gè)ID了。我不想破壞原有的內(nèi)部鏈接，所以我更愿意使用標(biāo)題本來的ID。只有當(dāng)標(biāo)題沒有ID的時(shí)候我才創(chuàng)建一個(gè)新的ID。
復(fù)制代碼 代碼如下: var headerId = toBeTOCced[i].id || 'link' + i;
我們剛剛創(chuàng)建的鏈接的href屬性就應(yīng)該是#+headerId，標(biāo)題本身也就有了一個(gè)ID。
復(fù)制代碼 代碼如下:
tmp.href = '#' + headerId;
toBeTOCced[i].id = headerId;

一個(gè)特殊情況：如果標(biāo)題是H2，那就是頁(yè)面的頂部，也會(huì)得到一個(gè)ID。
復(fù)制代碼 代碼如下:
if (toBeTOCced[i].nodeName == 'H2') {
tmp.innerHTML = 'Top';
tmp.href = '#top';
toBeTOCced[i].id = 'top';
}
}

現(xiàn)在表格就生產(chǎn)了，我們返回給調(diào)用它的地方。
復(fù)制代碼 代碼如下:return y;}

顯示和隱藏ToC
最后這個(gè)函數(shù)用了顯示和隱藏ToC。非常的簡(jiǎn)單，先檢測(cè)ToC的狀態(tài)，然后根據(jù)信息生產(chǎn)一個(gè)新的文本和display值。
復(fù)制代碼 代碼如下:
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;
}

這個(gè)函數(shù)在用戶點(diǎn)擊<span>的時(shí)候調(diào)用，那樣他就可以切換ToC的顯示。另外當(dāng)用戶在鏈接上點(diǎn)擊的時(shí)候也會(huì)馬上隱藏ToC的。
翻譯地址：http://www.quirksmode.org/dom/toc.html
轉(zhuǎn)載請(qǐng)保留以下信息
作者：北玉(tw:@rehawk)

JavaScript技術(shù)：JavaScript DOM 學(xué)習(xí)第三章 內(nèi)容表格，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。