JavaScript DOM 學習第三章內(nèi)容表格

更新時間：2010年02月19日 13:20:00 作者：

在這一章我會解釋我的網(wǎng)站上的所有頁面都在運行的內(nèi)容表格的代碼。他會生產(chǎn)這個頁面的所有h3和h4的列表，然后給他們添加一個鏈接。

如果你也想這么做，那么你還需要我的getElementByTagNames()函數(shù)。

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; 
}

解釋
這段代碼運行如下：
準備階段
首先我創(chuàng)建一個<div id="innertoc">來放置表格內(nèi)容

復制代碼代碼如下:

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

然后在他的上面添加一個<span>標簽。點擊這個元素就會運行showhideTOC()函數(shù)，我會在下面解釋。

復制代碼代碼如下:

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

然后我再創(chuàng)建一個DIV用了放置真正的鏈接。在這個div上單擊（真正的含義是：在這個div里的任何一個鏈接上單擊）一樣會觸發(fā)showhideTOC()函數(shù)。

復制代碼代碼如下:

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

得到標題
然后新建一個toBeTOCced數(shù)組，再用我的getElementByTagNames()函數(shù)來得到整個頁面的左右標題。

復制代碼代碼如下:

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

如果數(shù)組里只有一個元素（比如這個頁面只有一個h2標題）就停止。我不想讓ToC只有一個元素。

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

復制代碼代碼如下:

 
for (var i=0;i<toBeTOCced.length;i++) { 
var 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'; 

現(xiàn)在我們需要把a元素鏈接到他真正的標題上。這需要一個唯一的ID。然而，這些標題可能已經(jīng)包含一個ID了。我不想破壞原有的內(nèi)部鏈接，所以我更愿意使用標題本來的ID。只有當標題沒有ID的時候我才創(chuàng)建一個新的ID。

復制代碼代碼如下:

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

我們剛剛創(chuàng)建的鏈接的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'; 
} 
} 

現(xiàn)在表格就生產(chǎn)了，我們返回給調(diào)用它的地方。

復制代碼代碼如下:

return y;}

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

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

您可能感興趣的文章: