JavaScript DOM 学习第三章内容表格_基础知识-tutorial js-php.cn

JavaScript DOM 学习第三章内容表格_基础知识

WBOY

Lepaskan： 2016-05-16 18:34:26

asal

1052 orang telah melayarinya

如果你也想这么做，那么你还需要我的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 
    for (var i=0;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; 
}

解释
这段代码运行如下：
准备阶段
首先我创建一个

来放置表格内容

复制代码代码如下:

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

然后在他的上面添加一个标签。点击这个元素就会运行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的使用：网站里有些标题包含

这样的HTML标签，我也想让这些在ToC里面显示。我把这些新的链接添加在ToC的里面的<div>上。 <br><br><div class="codetitle">
<span><a style="CURSOR: pointer" data="80623" class="copybut" id="copybut80623" onclick="doCopy('code80623')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code80623"> <br>for (var i=0;i<tobetocced.length>var tmp = document.createElement('a'); <br>tmp.innerHTML = toBeTOCced[i].innerHTML; <br>tmp.className = 'page'; <br>z.appendChild(tmp); <br></tobetocced.length>
</div> <br><br>如果标题是h4或者h5我就添加一个额外的类。 <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="7326" class="copybut" id="copybut7326" onclick="doCopy('code7326')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code7326"> <br>if (toBeTOCced[i].nodeName == 'H4') <br>tmp.className += ' indent'; <br>if (toBeTOCced[i].nodeName == 'H5') <br>tmp.className += ' extraindent'; <br>
</div> <br>现在我们需要把a元素链接到他真正的标题上。这需要一个唯一的ID。然而，这些标题可能已经包含一个ID了。我不想破坏原有的内部链接，所以我更愿意使用标题本来的ID。只有当标题没有ID的时候我才创建一个新的ID。 <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="27216" class="copybut" id="copybut27216" onclick="doCopy('code27216')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code27216"> var headerId = toBeTOCced[i].id || 'link' + i; </div> <br>我们刚刚创建的链接的href属性就应该是#+headerId，标题本身也就有了一个ID。 <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="94104" class="copybut" id="copybut94104" onclick="doCopy('code94104')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code94104"> <br>tmp.href = '#' + headerId; <br>toBeTOCced[i].id = headerId; <br>
</div> <br>一个特殊情况：如果标题是H2，那就是页面的顶部，也会得到一个ID。 <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="93441" class="copybut" id="copybut93441" onclick="doCopy('code93441')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code93441"> <br>if (toBeTOCced[i].nodeName == 'H2') { <br>tmp.innerHTML = 'Top'; <br>tmp.href = '#top'; <br>toBeTOCced[i].id = 'top'; <br>} <br>} <br>
</div> <br>现在表格就生产了，我们返回给调用它的地方。 <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="68873" class="copybut" id="copybut68873" onclick="doCopy('code68873')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code68873">return y;} </div> <br><br>显示和隐藏ToC <br>最后这个函数用了显示和隐藏ToC。非常的简单，先检测ToC的状态，然后根据信息生产一个新的文本和display值。 <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="42575" class="copybut" id="copybut42575" onclick="doCopy('code42575')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code42575"> <br>var TOCstate = 'none'; <br>function showhideTOC() { <br>TOCstate = (TOCstate == 'none') ? 'block' : 'none'; <br>var newText = (TOCstate == 'none') ? 'show page contents' : 'hide page contents'; <br>document.getElementById('contentheader').innerHTML = newText; <br>document.getElementById('innertoc').lastChild.style.display = TOCstate; <br>} <br>
</div> <br>这个函数在用户点击<span>的时候调用，那样他就可以切换ToC的显示。另外当用户在链接上点击的时候也会马上隐藏ToC的。 <br>翻译地址：http://www.quirksmode.org/dom/toc.html <br>转载请保留以下信息 <br>作者：北玉(tw:@rehawk) 


</span>
</div>

JavaScript DOM 学习第三章 内容表格_基础知识

JavaScript DOM 学习第三章内容表格_基础知识