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 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
基于jQuery的history历史记录插件
Dec 11 Javascript
JavaScript打字小游戏代码
Dec 26 Javascript
去掉gridPanel表头全选框的小例子
Jul 18 Javascript
Javascript中3种实现继承的方法和代码实例
Aug 12 Javascript
JQuery动画与特效实例分析
Feb 02 Javascript
javascript实现带下拉子菜单的导航菜单效果
May 14 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 Javascript
layui弹出层按钮提交iframe表单的方法
Aug 20 Javascript
angular.js实现列表orderby排序的方法
Oct 02 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 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/10/09 PHP
php获取汉字首字母的函数
2013/11/07 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
Yii2-GridView 中让关联字段带搜索和排序功能示例
2017/01/21 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
javascript 对象定义方法 简单易学
2009/03/22 Javascript
flash 得到自身url参数的代码
2009/11/15 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
AJAX跨域请求json数据的实现方法
2013/11/11 Javascript
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
js实现3D图片展示效果
2017/03/09 Javascript
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
JS实现选项卡效果的代码实例
2019/05/20 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
Vue中通过vue-router实现命名视图的问题
2020/04/23 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
2020/08/24 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
Python群发邮件实例代码
2014/01/03 Python
python统计日志ip访问数的方法
2015/07/06 Python
Python装饰器的执行过程实例分析
2018/06/04 Python
解决pycharm最左侧Tool Buttons显示不全的问题
2019/12/17 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
pycharm 的Structure界面设置操作
2021/02/05 Python
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
印度尼西亚最大的电商平台:Tokopedia(印尼版淘宝)
2017/12/02 全球购物
巴西手表购物网站:eclock
2019/03/19 全球购物
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
导师评语大全
2014/04/26 职场文书
搞笑爱情保证书
2014/04/29 职场文书
公司委托书格式范文
2014/10/09 职场文书
Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)
2022/02/12 Servers