JavaScript之BOM和DOM

JavaScript之BOM和DOMBOM和DOM简介•BOM与DOM简介–JS提供了控制页面内容的方法，而要控制页面内容，还需要能够访问页面内容。–BOM(BrowserObjectModel)提供了访问浏览器各种功能部件的途径，例如浏览器窗口本身、浏览历史等；而DOM(DocumentObjectModel)提供了访问浏览器中网页文档各元素的途径，包括页面中的超链接、表单等各种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.alert();简写方式alert();window.document.write();简写方式document.write()Window对象属性属性描述closed布尔值，返回窗口是否关闭，只读。name设置或返回窗口的名称，该名称是在open()方法创建窗口时指定的或者使用一个frame标记的name属性指定的。窗口的名称可以用作一个a或者form标记的target属性的值innerHeight窗口中文档显示区域的高度，不含菜单栏、工具栏等部分，单位为像素。该属性为可读可写。IE不支持，使用html元素的clientHeight代替innerWidth窗口中文档显示区域的高度，不含菜单栏、工具栏等部分，单位为像素，该属性可读可写。IE不支持，使用html元素的clientWidth代替outerHeight表示浏览器的高度，包含工具栏、菜单栏等。IE不支持此属性，且没有提供替代的属性outerWidth表示浏览器的宽度。IE不支持此属性，且没有提供替代的属性Window对象属性属性描述frames[]返回窗口中所有命名的框架。该集合是Window对象的数组，每个Window对象在窗口中含有一个框架或iframe。属性frames.length存放数组frames[]中含有的元素个数。pageXOffset表示文档向右滚动过的像素数。IE不支持，使用scrollLeft代替。pageYOffset表示文档向下滚过的像素数。IE不支持，使用scrollTop代替parent返回父窗口top返回最顶层的先辈窗口。self返回对当前窗口的引用。等价于Window属性。screenLeftscreenTopscreenXscreenY浏览器中文档窗口的左上角在屏幕上的x坐标和y坐标，只读属性。IE、Safari和Opera支持screenLeft和screenTop，而Firefox和Safari支持screenX和screenY。Window对象方法属性描述alert(text)显示只有一个确认按钮的警告框。confirm(text)显示确认按钮和取消按钮的对话框。prompt(text,defaultText)显示可提示用户输入的对话框。open(URL,name,[options])打开新窗口。URL为新窗口的URL地址，name为新窗口名称，options为可选的参数列表print()打印当前窗口的内容close()关闭指定的窗口moveBy(x,y)可相对窗口的当前坐标把它移动指定的像素。moveTo(x,y)把窗口的左上角移动到一个指定的坐标。blur()把键盘焦点从顶层窗口移开。focus()把键盘焦点给予一个窗口。window对象方法方法描述setTimeout()在指定的毫秒数后调用函数或计算表达式。setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式。clearTimeout()取消由setTimeout()方法设置的timeout。clearInterval()取消由setInterval()设置的timeout。scrollBy(x,y)按照指定的像素值来滚动内容。scrollTo(x,y)把内容滚动到指定的坐标。Window对象方法•open()——打开浏览器窗口–功能：打开一个新的浏览器窗口，返回一个window对象，将该对象赋予变量，可以跟踪该窗口–语法：winObj=open(URL,name,[options])–参数：•URL为打开的文档的URL地址；•name为新窗口的名称，一般为超链接target使用；•options为新窗口的外观设置浏览器窗口外观属性属性取值描述toolbaryes或no是否显示工具栏locationyes或no是否显示地址栏statusyes或no是否显示状态栏menubaryes或no是否显示菜单栏scrollbarsyes或no是否显示滚动条resizableYes或no窗口是否可以改变大小width整数值，单位像素新建窗口显示区域的宽度，不含边框宽度height整数值，单位像素新建窗口显示区域的高度，不含边框高度left整数值，单位像素表示距屏幕左边的距离top整数值，单位像素表示距屏幕顶边的距离实例：弹出一个窗口•Window.open()实例–当网页加载完成，弹出一个新窗口，新窗口名字叫“win2”–新窗口的尺寸：width=200，height=200–新窗口在显示屏幕中居中显示–单击原窗口中的链接，在新窗口中显示内容–新窗口10秒钟后，自动关闭–效果图在下一张幻灯片•无法使用window.close()关闭Firefox窗口–第一步：在Firefox地址栏，输入about:config–第二步：找到选项dom.allow_scripts_to_close_windows–第三步：右击“切换”将值改为“true”延迟与周期执行•setTimeout()–功能：用于在指定的毫秒数后调用函数或计算表达式（执行一次）–语法：vartimeout_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()从而取消对code的周期性执行的值•clearInterval()–功能：learInterval()方法可取消由setInterval()设置的timeout–语法：clearInterval(id_of_setinterval)–参数：id_of_setInterval是由setInterval返回的ID值实例：单行文本框中滚动文本实例：图片自动切换延迟与周期执行•两者区别–setInterval()重复不断地执行所指定的函数或表达式；而setTimeout方法只在超时后执行一次。–setTimeout()方法要想重复执行所指定的函数或表达式，则需要在函数中递归调用自己实例：移动窗口——moveTo()•注意：在单独的页面中，弹出一个新窗口，新窗口设置相关滚动属性。实例：滚动网页内容——scrollBy()screen对象•screen对象–window对象的screen属性提供一个screen对象，该对象提供显示器屏幕相关的一些信息属性描述width显示器屏幕的宽度，单位像素height显示器屏幕的高度，单位像素colorDepth显示器屏幕色彩深度，即每个像素色彩位数，例如32位availWidth显示器屏幕可用宽度，除任务栏外availHeight显示器屏幕可用高度，除任务栏外测试自己显示器屏幕的尺寸和有效尺寸navigator对象•navigator对象–该对象提供有关浏览器的各种信息，所有浏览器都支持该对象属性描述appName浏览器的名称，对于IE是“MicrosoftInternetExplore”，对于Firefox为“Netscape”。appVersion浏览器版本号(是浏览器核心内部版本号)和其他版本信息。platform运行浏览器的硬件平台systemLanguage操作系统采用的语言userLanguage浏览器使用的语言userAgent返回由客户机发送服务器的user-agent头部的值。cookieEnabled返回指明浏览器中是否启用cookie的布尔值。实例：查看自己浏览器的信息location对象•location对象–该对象存储了当前显示的文档的地址，包括完整的URL地址以及组成URL地址的各个部分。其中各个属性被重新赋值后，浏览器将自动刷新，载入新的URL地址。属性描述hash表示URL地址中的锚点部分，包括前导符“#”。可读可写host表示URL中的主机名和端口，即IP地址或者域名端口，可读可写hostname表示URL中的主机名部分。可读可写href表示当前页面完整的URL地址，可读可写。pathname表示URL中的页面路径部分，包含页面文件名称，可读可写port表示URL地址中的端口部分，可读可写protocol表示URL中的协议部分，包括尾部的“：”符号，可读可写。如http:search表示URL中的参数部分，可读可写。如：?name=marylocation对象方法描述assign()该方法为浏览器指定新的URL地址，与设置href属性的值相同。该方法同样会在history对象的浏览列表中增加一条记录。replace()使用指定的页面文档替换浏览器中当前的页面文档。方法是接受一个参数，该参数指定新的页面URL地址。replace()方法不会在History对象中生成一个新的记录。当使用该方法时，新的URL将覆盖History对象中的当前记录如：location.replace(“”);reload()用于刷新当前文档