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 相关文章推荐
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 Javascript
四种参数传递的形式——URL,超链接,js,form表单
Jul 24 Javascript
Javascript实现的简单右键菜单类
Sep 23 Javascript
angular.bind使用心得
Oct 26 Javascript
深入浅出 jQuery中的事件机制
Aug 23 Javascript
javascript深拷贝(deepClone)详解
Aug 24 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
js实现交通灯效果
Jan 13 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
Apr 22 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
Jan 16 Javascript
webpack4的迁移的使用方法
May 25 Javascript
vue语法自动转typescript(解放双手)
Sep 18 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
PHP通用检测函数集合
2006/11/25 PHP
PHP去掉从word直接粘贴过来的没有用格式的函数
2012/10/29 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
ExtJS的拖拽效果示例
2013/12/09 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
JavaScript实现的经典文件树菜单效果
2015/09/08 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
js实现图片360度旋转
2017/01/22 Javascript
javascript 的变量、作用域和内存问题
2017/04/19 Javascript
微信小程序“摇一摇”的实例代码
2017/07/20 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
微信小程序实现侧边分类栏
2019/10/21 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
Python群发邮件实例代码
2014/01/03 Python
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
python实现文件路径和url相互转换的方法
2015/07/06 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
python多线程同步之文件读写控制
2021/02/25 Python
Python ORM编程基础示例
2020/02/02 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
会计主管岗位职责
2014/01/03 职场文书
办理暂住证介绍信
2014/01/11 职场文书
上班离岗检讨书
2014/01/27 职场文书
四查四看整改措施
2014/09/19 职场文书
施工安全员岗位职责
2015/04/11 职场文书
2019财务转正述职报告
2019/06/27 职场文书