【翻譯作品】JavaScript DOM學習第三章：內容表格

文章目錄

• 準備階段
• 得到標題
• 建立ToC
• 顯示和隱藏ToC

在這一章我會解釋我的網站上的所有頁面都在啟動並執行內容表格的代碼。他會生產這個頁面的所有h3和h4的列表，然後給他們添加一個連結。

如果你也想這麼做，那麼你還需要我的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 < 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;}
 
解釋
這段代碼運行如下：
準備階段
首先我建立一個<div id="innertoc">來放置表格內容
function createTOC() {var y = document.createElement('div');y.id = 'innertoc';
然後在他的上面添加一個<span>標籤。點擊這個元素就會運行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的使用：網站裡有些標題包含<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';
現在我們需要把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;}
這個函數在使用者點擊<span>的時候調用，那樣他就可以切換ToC的顯示。另外當使用者在連結上點擊的時候也會馬上隱藏ToC的。
翻譯地址：http://www.quirksmode.org/dom/toc.html