JavaScript之BOM和DOM.ppt

JavaScript之BOM和DOM BOM和DOM简介 BOM与DOM简介 JS提供了控制页面内容的方法，而要控制页面内容，还需要能够访问页面内容。 BOM(Browser Object Model)提供了访问浏览器各种功能部件的途径，例如浏览器窗口本身、浏览历史等；而DOM(Document Object Model)提供了访问浏览器中网页文档各元素的途径，包括页面中的超链接、表单等各种HTML元素及其内容。 BOM与DOM是独立于程序语言和平台的标准，W3C定义了一组标准接口，而这些接口在浏览器中以对象的形式实现。BOM与DOM均由一组对象组成，对象定义了属性和方法。 BOM与DOM关系非常密切。BOM的window对象中包含一个document属性，该属性是对DOM模型的document对象的引用，代表了当前窗口中网页文档所对应的document对象，通过该属性可以访问网页文档的各种内容。 BOM结构图 BOM概述 BOM结构图说明 反映了BOM中各对象之间的层次关系； 在BOM中，window对象是顶层对象，其它对象均是其子对象； history浏览器的浏览历史 location对象代表当前显示的文档的地址 Navigator对象提供有关浏览器的各种信息 screen对象提供显示器屏幕相关的一些信息 Frames[]为window对象的数组型属性，每一个数组元素对应框架集(frameset)中的一个框架(frame)所对应的窗口。 Document对象是对DOM的引用，代表了当前浏览器窗口中的网页文档 window对象 window对象 Window对象是BOM与DOM的顶层对象，表示浏览器窗口或者框架中的框架。 Window对象是脚本中的全局对象，可以在任何地方调用，脚本中任何对象的使用最终都要追溯到对window对象的访问，所以在使用window对象的各种属性和方法时，window前缀可以省略。 访问window对象或子对象属性和方法，要按照层次关系，使用“.”运算符将它们连接起来。 Window对象属性 Window对象属性 Window对象方法 window对象方法 Window对象方法 open()——打开浏览器窗口 功能：打开一个新的浏览器窗口，返回一个window对象，将该对象赋予变量，可以跟踪该窗口 语法：winObj=open(URL,name,[options]) 参数： URL为打开的文档的URL地址； name为新窗口的名称，一般为超链接target使用； options为新窗口的外观设置 浏览器窗口外观属性 实例：弹出一个窗口 Window.open()实例 当网页加载完成，弹出一个新窗口，新窗口名字叫“win2” 新窗口的尺寸：width=200，height=200 新窗口在显示屏幕中居中显示 单击原窗口中的链接，在新窗口中显示内容 新窗口10秒钟后，自动关闭 效果图在下一张幻灯片 无法使用window.close()关闭Firefox窗口 第一步：在Firefox地址栏，输入about:config 第二步：找到选项dom.allow_scripts_to_close_windows 第三步：右击“切换”将值改为“true” 延迟与周期执行 setTimeout() 功能：用于在指定的毫秒数后调用函数或计算表达式 （执行一次） 语法：var timeout_name=setTimeout(code,millisec) 参数：code必需。要调用的函数后要执行的 JavaScript 代码串；millisec必需。在执行代码前需等待的毫秒数。 提示：setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。 clearTimeout() 功能：取消由 setTimeout() 方法设置的定时器 语法：clearTimeout(timeout_name) 参数：timeout_name由setTimeout()返回的ID值。该值标识了一个setTimeout定时器。 实例：简单计时器 创建一个按钮，用来显示信息 创建一个按钮，用来开始计时 创建一个按钮，用来停止计时 延迟和周期执行 setInterval() 功能：按照指定的周期（以毫秒计）来调用函数或计算表达式 （重复执行） 语法：interval_name=setInterval(code,millisec) 参数：code必需，要调用的函数或要执行的代码串；millisec必需，周期性执行或调用 code 之间的时间间隔，以毫秒计 返回值：一个可以传递给 Window.clearInterval() 从而取消对 co