JavaScript DOM 学习第三章 内容表格


Posted in Javascript onFebruary 19, 2010

如果你也想这么做,那么你还需要我的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)
Javascript 相关文章推荐
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
Jul 31 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
JQuery实现绚丽的横向下拉菜单
Dec 19 Javascript
javascript实现数字+字母验证码的简单实例
Feb 10 Javascript
浅析tr的隐藏和显示问题
Mar 05 Javascript
浅析JQuery中的html(),text(),val()区别
Sep 01 Javascript
angularJS中router的使用指南
Feb 09 Javascript
学习JavaScript设计模式(单例模式)
Nov 26 Javascript
解决easyui日期时间框ie的兼容的问题
Mar 01 Javascript
Node.js中的cluster模块深入解读
Jun 11 Javascript
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
vue 强制组件重新渲染(重置)的两种方案
Oct 29 Javascript
JavaScript DOM 学习第二章 编辑文本
Feb 19 #Javascript
JavaScript DOM学习第一章 W3C DOM简介
Feb 19 #Javascript
JavaScript 题型问答有答案参考
Feb 17 #Javascript
JavaScript 学习技巧
Feb 17 #Javascript
JavaScript Timer实现代码
Feb 17 #Javascript
两个比较有用的Javascript工具函数代码
Feb 17 #Javascript
类似GMAIL的Ajax信息反馈显示
Feb 16 #Javascript
You might like
第一节--面向对象编程
2006/11/16 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
php计算整个mysql数据库大小的方法
2015/06/19 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
在Javascript中处理数组之toSource()方法的使用
2015/06/09 Javascript
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
[47:35]VP vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
python赋值操作方法分享
2013/03/23 Python
Web服务器框架 Tornado简介
2014/07/16 Python
python计算方程式根的方法
2015/05/07 Python
wxPython使用系统剪切板的方法
2015/06/16 Python
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
python图像和办公文档处理总结
2019/05/28 Python
PyQt5 在label显示的图片中绘制矩形的方法
2019/06/17 Python
使用 python pyautogui实现鼠标键盘控制功能
2019/08/04 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
html5默认气泡修改的代码详解
2020/03/13 HTML / CSS
美国医生配方营养补充剂供应商:Healthy Directions
2019/07/10 全球购物
测绘工程专业个人自我评价
2013/12/01 职场文书
关于迟到的检讨书
2014/01/26 职场文书
车间主任岗位职责
2014/03/16 职场文书
如何写好自荐信
2014/04/07 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
认识实习感想
2015/08/10 职场文书
初中数学教学反思范文
2016/02/17 职场文书