第7章Javascript3 基于web标准的网页设计.ppt

《基于Web标准的网页设计》 唐四薪 编著 清华大学出版社 配套网站： 第七章 JavaScript概述 　唐四薪　2009年4月 文档对象模型DOM DOM（Document Object Module） 文档对象模型DOM（Document Object Module）定义了用户操纵文档对象的接口，它使得用户对HTML文档有了空前的访问能力。DOM最初是用来表达和操纵XML文档的，大部分编程语言（如Java、PHP、Python）都提供了相应的实现。考虑到正确的XHTML不过是XML的一个子集，有效地解析并浏览DOM文档无疑能简化JavaScript的开发，因为JavaScript中绝大部分操作都是脚本和网页里不同的HTML元素之间的交互，而DOM则是简化这一过程的绝佳工具。 DOM编程在HTML页面中的应用 （1）访问指定节点； （2）访问相关节点； （3）访问节点属性； （4）检查节点类型； （5）创建节点； （6）操作节点。 1. 访问指定节点 getElementById() getElementsByName() getElementsByTagName() 2. 访问元素属性 getAttribute(name) setAttribute(name, value) removeAttribute(name) 访问相关节点 “访问相关节点”的含义是根据已知的节点，寻找和它存在联系的节点，如父节点、子节点、兄弟节点等。 （1）访问html节点和body节点 （2）访问子节点 ① childNodes：子节点的列表； ② firstChild：第一个子节点； ③ lastChild：最后一个子节点。 检查节点类型 DOM中的节点主要有三种类型，分别是元素节点、属性节点和文本节点 （1）元素节点的nodeType值为1； （2）属性节点的nodeType值为2； （3）文本节点的nodeType值为3。 DOM编程实例 制作Tab选项卡面板 Tab面板由于能节省很多网页空间、给用户较好的体验,受到大家的普遍喜爱,所以是目前网页中流行的高级元素。 首先，一个tab面板可以分解成两部分，即上方的导航条和下面的内容框，实际上，导航条中有几个tab项就应该会有几个内容框。只是因为当鼠标滑动到某个tab项的时候，才显示与其对应的一个内容框，而把其他内容框都通过（dislay:none）隐藏了，且不占据网页空间。如果不把其他内容框隐藏的话那么图1中的tab面板就是图2这个样子。 Tab面板的结构代码 ul id=tab lia id=tab1 class=cur href=#课程特色/a/li lia id=tab2 href=#教学方法/a/li /ul div id=info1 ·a href=#本课程主要特色/abr / ·a href=#课程地位/abr / /div div id=info2 ·a href=#教学方法和教学手段/abr / ·a href=#课程的历史/abr / /div Tab面板的结构 从结构代码中可以看出，这个Tab面板是用具有2个列表项的无序列表做的导航条，使用2个div容器做的内容框。实际上这些div容器都没有上边框，而只有左、右和下边框，为了证实这一点，我们只需给这些div容器加个上边界（margin-top:12px;）就可以发现它们确实没有上边框， 其实div的上边框是由导航条ul#tab元素的下边框实现的，这是因为当鼠标滑过tab项时，要让tab的子元素的下边框变为白色，而且正好遮盖住ul#tab元素的蓝色下边框。这样在激活的tab项处就看不到tab元素的下边框了。 为了实现这种边框的遮盖，首先必须使两个元素的边框重合，当然，有人会说，如果给div容器加个上边框，再让div容器使用负边界法向上偏移1像素（margin-top:-1px;），那么它的上边框也会和tab项的下边框重合，但这样的话是div容器的上边框覆盖在tab项的下边框上，这样即算tab项的下边框变白色，也会被div容器的上边框覆盖而看不到效果，这就是div容器不能有上边框的原因。 所以只能使用ul的子元素的下边框覆盖ul元素的下边框，因为默认情况下子元素的盒子是覆盖在父元素盒子之上的。在这里ul的子元素有li和a。由于当鼠标滑过时需要子元素的下边框变色，而IE 6只支持a元素的hover伪类，所以选择用a元素的下边框覆盖ul元素的下边框 #tab { margin: 0; /*通用设置，将列表的边界、填充都设为0*/ padding: 0 0 24px 0; /*由于li元素浮动，ul盒子高度为0，用填充使高度扩展*/ list-style-type: non