DOM编程-document对象00106.pptVIP

第三章 DOM编程－document对象 回顾 window对象有哪些常用的方法及其含义？ 请说明Date对象主要用来做什么？ 请详细解释setTimeout( )方法的功能。 本章任务 制作浮动的广告图片特效 制作带关闭按钮的浮动窗口 制作全选/全不选特效 本章目标 document对象 每个载入浏览器的 HTML 文档都会成为 Document 对象。 Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。 document对象 对象属性： document.title //设置文档标题等价于HTML的title标签 document.bgColor //设置页面背景色 document.fgColor //设置前景色(文本颜色) document.linkColor //未点击过的链接颜色 document.alinkColor //激活链接(焦点在此链接上)的颜色 document.vlinkColor //已点击过的链接颜色 document.URL //设置URL属性从而在同一窗口打开另一网页 document.fileCreatedDate //文件建立日期，只读属性 document.fileModifiedDate //文件修改日期，只读属性 document.charset //设置字符集 简体中文:gb2312 document.fileSize //文件大小，只读属性 document.cookie //设置和读出cookie document对象 方法 制作浮动的广告图片-1 制作浮动的广告图片-2 实现思路： 在页面中插入层，然后在将图片放在层中。 编写脚本 1、使用getElementByID( )方法获取层对象 2、捕获鼠标滚动事件，改变层对象的位置坐标 制作浮动的广告图片-3 常见的页面坐标的介绍 top:指定元素的上边界位置。 pixelTop:设置或返回元素的上边界。 left:指定元素的左边界位置。 scrolltop:页面滚动的高度 制作浮动的广告图片-4 制作带关闭按钮的浮动窗口-1 制作带关闭按钮的浮动窗口-2 实现思路： 在页面中插入层，在层中插入图片 编写脚本 1、使用getElementById( )方法获得层对象 2、设置层的样式style的显示属性display=none 制作带关闭按钮的浮动窗口-3 制作带关闭按钮的浮动窗口-4 制作带关闭按钮的浮动窗口-5 小结 1 制作右边栏浮动的带关闭按钮的广告图片 制作实现全选效果-1 制作实现全选效果-2 1、复选框是否选中的属性是哪个？ 2、写代码逐个复选框设置为true，有没有更好的办法？ 制作实现全选效果-3 实现思路： 创建一组同名的复选框 编写脚本 1、使用getElementsByName( )方法获得一组同名的复选框对象。 2、通过循环来改变复选框是否被选中属性checked的值。 制作实现全选效果-4 小结 2 编写如左图所示，通过全选/全不选前面加个复选框来实现全选/全不选切换的效果。 小结3 编写如图所示的效果，通过选择下列列表框选项，实现页面背景色的改变效果 常见错误-1 常见错误-2 总结 请介绍Document对象的常用属性？ 请详细解释Document对象的常用方法？ 请简述制作带关闭按钮的浮动窗口实现思路？ 请简要回答如何制作全选/全不选复选框效果？ * * 演示示例1：浮动的广告图片 演示示例2：带关闭按钮的浮动窗口 演示示例3：全选/全不选特效 会使用document对象的getElementById( )方法访问DIV层对象 会使用document对象的getElementsByName( )方法访问表单元素 会使用DIV对象的样式属性控制层的隐藏和显示 根据HTML元素指定的ID，获得唯一的一个HTML元素。如：访问DIV层对象、图片Img对象 getElementByID( ) 说明 名称 getElementsByName( ) 根据HTML元素指定的name，获得相同名称的一组元素。如：访问表单元素(全选功能) write() 动态向页面写入内容 如何在页面上方显示广告图片？如何控制图片的移动？ 使用DIV层，把图片放在层中，然后使用JavaScript控制层的位置坐标 SCRIPT language=javascript var advInitTop=0; function inix( ){ advInitTop=document.getElementById(advLayer).style.