JavaScript网页特效案例教程课件作者王莹第三章节课件第三章节.pptVIP

JavaScript网页特效案例教程 主编：王莹 副主编：印梅 齐燕 第三章使用DOM和BOM 尚辅网 / 教学导航 8课时 课时建议 案例教学 自主学习 探究训练 教学方法 能够使用document.getElementById()和document.getElementsByName()获得控件 能够使用延迟方法setTimeout()实现特效 本章重点 能使用DOM树状模型获得网页元素 能使用document.getElementById()方法获得控件 能使用document.getElementsByName()方法获得控件 能够使用延迟方法setTimeout()实现特效 能使用BOM模型中window，document，history和form对象的常见属性方法和事件 技能目标 了解DOM模型 document对象常用属性和方法 window对象的常用属性和方法 history对象的常用属性和方法 location对象的常用属性和方法 知识目标 3.1 DOM获得网页元素 本案例涉及到的知识点： HTML树形结构 DOM中节点的引用 document.getElementById()方法 document.getElementsByTagName()方法 document.getElementsByName()方法 任务分析 2 相关知识 知识点1：什么是DOM 在 1998 年，W3C 发布了第一级的 DOM 规范。 这个规范允许访问和操作 HTML 页面中的每一个单独的元素。 所有的浏览器都执行了这个标准 知识点2：HTML DOM对象 一个HTML文档可以表示成一个倒立的文档树或节点树。 知识点3：根节点 有两种特殊的文档属性可用来访问根节点： document.documentElement document.body 知识点4：parentNode、firstChild以及lastChild 这三个属性parentNode、firstChild以及lastChild可遵循文档的结构，在文档中进行“短距离的旅行”。 请看下面这个 HTML 片段： /table /tr tdAlaska/td tdDoe/td tdJohn/td tr table 在上面的HTML代码中，第一个td是tr元素的首个子元素（firstChild），而最后一个td是tr元素的最后 一个子元素（lastChild）。 知识点5：document.getElementById()方法 例1参考代码如下： a href=javascript: f2() 文本框显示2 /a a href=javascript: f1() 文本框显示1 /a input type=text id=text name=text / /script …………… } document.getElementById (text).value=2; { function f2() } document.getElementById(text).value=1; { function f1() script language=javascript 知识点6：getElementsByTagName()方法 例1:下面这个例子会返回文档中所有 p 元素的一个节点列表： document.getElementsByTagName(p); 例2:下面这个例子会返回所有 p 元素的一个节点列表，且这些 p 元素必须是 id 为 maindiv 的元素的后代： document.getElementById(maindiv).getElementsByTagName(p); 例3：下面例子将获得第二个表单中所有的文本框控件中的值。 知识点7：getElementsByName()方法 语法: document.getElementsByName(“控件名称”) 3.操作步骤 4操作练习 3.2 DOM之document对象 任务描述 本案例涉及到的知识点： 漂浮层的使用 document.getElementById()获得层 获得网页元素的坐标 window.onscroll事件 2相关知识 知识点1:document对象编程 1document常用属性 已点击过的链接颜色 document.vlinkColor? 激活链接(焦点在此链接上)的颜色 document.alinkColor? 未点击过的链接颜色 document.linkColor? 设置前景色(文本颜色)?? document.fgColor 设置文档标题等价于