JavaScript DOM 學習第三章 內容表格

如果你也想這麼做，那麼你還需要我的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
轉載請保留以下資訊
作者：北玉(tw:@rehawk)