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 相关文章推荐
href下载文件根据id取url并下载
May 28 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 Javascript
基于javascript实现图片预加载
Jan 05 Javascript
jquery动态切换背景图片的简单实现方法
May 14 Javascript
Vue.js实现拖放效果的实例
Sep 30 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
Mar 16 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
Apr 25 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 Javascript
Vue-router 切换组件页面时进入进出动画方法
Sep 01 Javascript
解决vue 引入子组件报错的问题
Sep 06 Javascript
跟混乱的页面弹窗说再见
Apr 11 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设计模式 Command(命令模式)
2011/06/26 PHP
ajax 的post方法实例(带循环)
2011/07/04 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
PHP中__autoload和Smarty冲突的简单解决方法
2016/04/08 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
理解Javascript_14_函数形式参数与arguments
2010/10/20 Javascript
js中关于String对象的replace使用详解
2011/05/24 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
Angular路由简单学习
2016/12/26 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
2017/07/11 Javascript
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
2020/02/24 Javascript
我所理解的JavaScript中的this指向
2020/09/04 Javascript
Python判断文件和字符串编码类型的实例
2017/12/21 Python
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
Python爬虫实现爬取百度百科词条功能实例
2019/04/05 Python
django迁移数据库错误问题解决
2019/07/29 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
python爬虫 基于requests模块发起ajax的get请求实现解析
2019/08/20 Python
Python多线程多进程实例对比解析
2020/03/12 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
戴森香港官方网站:Dyson香港
2021/02/11 全球购物
大学四年职业生涯规划书范文
2014/01/02 职场文书
运动会解说词50字
2014/01/18 职场文书
卫生安全检查制度
2014/02/04 职场文书
乌鸦喝水教学反思
2014/02/07 职场文书
四年级科学教学反思
2014/02/10 职场文书
档案工作汇报材料
2014/08/21 职场文书
信仰观后感
2015/06/03 职场文书