软件开发培训班 >> 编程开发 >> JavaScript


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)