当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript DOM 学习第三章 内容表格

Javascript
颜色变换 像字符逐字输入的欢迎词
CSS 伪类实现的鼠标滑动图片链接
百度用到的Js日历 大家可以看看
CSS 渐变背景的6个演示代码
Jquery 弹出层插件实现代码
Javascript 模式实例 观察者模式
[原创]javascript 指定区域内图片等比例缩放实现代码 脚本之家整合版
javascript window对象属性整理
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
用JavaScript实现 铁甲无敌奖门人 “开口中”猜数游戏
理解 JavaScript 预解析
理解JavaScript变量作用域更轻松
JavaScript的变量作用域深入理解
javascript写的一个链表实现代码
Js 打字效果 逐一出现的文字
javascript 走马灯效果的链接提示
CSS 动态链接提示
JavaScript 事件的一些重要说明
JavaScript 三种不同位置代码的写法

No. « 266 267 268 269 »

技术文章搜索

关键字

Javascript 中的 JavaScript DOM 学习第三章 内容表格

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2010-02-27   浏览: 128 ::
收藏到网摘: n/a

在这一章我会解释我的网站上的所有页面都在运行的内容表格的代码。他会生产这个页面的所有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
转载请保留以下信息
作者：北玉(tw:@rehawk)