(window对象子对象和文档对象)课件

1、第九章windowd对象的子对象和文档对象 课程回顾n 了解DOM模型与BOM模型n 熟悉BOM中的顶级对象windown 了解window对象的常用属性和集合（document，location，frames，undefined）n 熟悉window对象的常用方法eval() isNaN() parseInt() parseFloat() n 熟悉window对象的对话框及窗口操作方法n 熟悉window对象的定时器的相关操作，包括setTimeout()、clearTimeout() 、setInterval()、clearInterval()等函数的使用n 掌握JavaScript函数对

2、象的结构、参数及调用n 掌握JavaScript常用事件的使用n熟悉window对象的常用子对象，包括opener、self、parent、top的应用方式等。n掌握地址对象locationn掌握历史对象historyn掌握浏览器信息对象navigatorn熟悉document的常用属性和方法n理解DOM，并能够使用JavaScript操作HTML中的DOMwindow对象的常用子对象opener属性 self属性 parent属性 top属性 history历史对象 常用窗口对象location位置对象 frames集合 navigator对象opener子对象n opener对象可以用于确

3、定open方法打开窗口的源窗口n 在使用open()方法打开新页面时候。可以通过opener属性来引用到父窗口。从而相互传值self子对象 n self对象实际上代表的是窗口自身，是用于对窗口对象自身的一些属性进行控制。在框架集应用或者对话框窗口中，使用self来引用自身能避免混乱n 例如在使用showModalDialog()方法,或 showModelessDialog()方法新打开的对话框页面中，使用链接将会在新页面打开，因此需要将对话框的默认链接目标指向self来避免这种情况！n代码：n在head标记中加入parent子对象和top子对象 n 这两个属性应用于框架页面中。没有框架的页面

4、讨论parent和top是没有意义的。n parent对象指相对于子窗口的父窗口。是一个相对的概念。只有在子窗口中才能获得到这个属性。n top对象指整个页面。也就是最外层的那个窗口。Parent案例此处超链接的target属性应该怎么写？退出后台Js代码是： parent.location=“login.html”top对象 对于base窗口来说，他的top对象是A窗口可以通过top.length来得到顶层窗口中含有的框架个数Base窗口A窗口location子对象 属性说明hash锚点名称host主机名称hostnamehost:porthref完整的URL字符串pathname路径por

5、t端口protocol协议search查询信息Location位置对象的属性说明 location对象：用来代表特定窗口的URL信息。 URL的格式：protocol/host:port/path?search#hash其中常用的协议有：http、file、ftp、mailto、news范例：location对象的常用方法location位置对象的方法 方法说明reload()重新加载replace(网址)用指定的网页取代当前网页按下一个按钮后前往网易网站，那么使用下面的代码 history历史对象 属性说明length存储在记录清单中的网址数目方法说明back()回到上一个历史记录中的网址f

6、orward()回到下一个历史记录中的网址go(整数或URL)前往历史记录中的网址用于存储客户端最近访问过的网址清单history历史对象的属性history 历史对象的方法框架对象 框架对象：是在同一屏幕上显示多个互不干涉的可滚动框架 的窗口。frames属性：是由源文件中含有Frameset的Frame标签创 建的子框架的对象构成的数组。parent.framesfr1parent.framesfr2parent.framesfr3parent.frames0parent.frames1parent.frames2或length属性：可以使用窗口的length属性来查询框架中的子框架的数量

7、navigator对象n navigator对象用来获取浏览器的信息n 常用的属性有nappName 浏览器的名称ncpuClass cpu平台nplatform 操作系统nplugins 浏览器的插件信息nsystemLanguage 操作系统语言nuserLanguage 用户设置的浏览器语言ncookieEnabled 是否允许CookienappVersion 浏览器版本信息nuserAgent 用户表头文档对象 文档对象常用的属性links集合anchors集合forms集合title属性文档对象在JavaScript中是一个很重要的对象。（document）bgColor属性ima

8、ges集合URL属性cookie子对象links集合 是一个对应于源文件中相应顺序的链接对象构成的数组如果文档里有三个链接标签即三个 那么可以使用如下的方法查询它们：document.links0document.links1document.links2anchors集合 如果你在文档里容纳了三个命名anchor，它们的名字分别为anchor1，anchor2和 anchor3，那么可以使用下面的代码分别查询它们： document.anchorsanchor1document.anchorsanchor2document.anchorsanchor3document.anchors0doc

9、ument.anchors1document.anchors2或如果想要得到文档中anchors的数量，可以使用length属性即调用：document.anchors.length。forms集合 如果你在文档里容纳了三个命名forms，它们的属性名分别为form1，form2和form3，那么可以使用下面的代码分别查询它们document.formsform1document.formsform2document.formsform3 document.forms0document.forms1document.forms2或如果想查询第二个form中一个名字为quantity的text对

10、象的值那么你可以使用document.forms1.quantity.valueimages集合 文档对象的images集合可以用来获取整个页面内所有的图片，也就是标记所定义的内容。也是通过下标或者索引来访问document.imagesimg1document.imagesimg2document.imagesimg3document.images0document.images1document.images2或如果想要得到当前页面总共有多少个图片，可以使用length属性。即调用：document.images.length。title属性title属性体现的是title标签的开始和结束

11、之间的值如果一个文档没有标题，则它的title属性是nullvar newWindow = window.open()var docTitle = newWindow.document.title 将打开窗口的title属性的值赋值给docTitlebgColor属性和URL属性bgColor属性用来设置或获取当前页面的页面背景，相当于body标记的bgcolor属性。URL属性用来获取当前页面的地址与前面提到的location对象的href相类似cookie子对象Cookie是一种以文件（Cookie文件）的形式保存在客户端硬盘的Cookies文件夹中的用户数据信息（Cookie数据）。Co

12、okie文件由所访问的Web站点建立，以长久的保存客户端与Web站点间的会话数据，并且该Cookie数据只允许被所访问的Web站点进行读取。Cookie存储的方式为文本。document.cookie = 关键字 = 值 ; expires = 有效日期 ;.“有效日期为GMT格式字符串，使用Data对象的totoGMTString()方法可以获得还包含path、domain、secure属性Cookie对象的使用n 获取指定cookie的方法n 由于cookie存储时为一段字符串，要获取指定的cookie，需要进行一些处理function getCookie(key)var reg=new

13、RegExp(key+=(;+),i);var rlt=document.cookie.match(reg);return rlt1; write()方法 write()方法是文档对象中一个很重要的方法它是将一个或多个表达式写到指定窗口的文档中 语法：document.write(expr1，.，prN) 。参数：expr1，.，exprN 这些参数可以是任何 JavaScript的表达式查看源码查看源码javascript中的dom操作n DOM是目前新技术应用中非常热门的话题，目前非常HOT的Ajax应用就是基于DOM操作的高级应用。DOM是一个通用的模型。通用于HTML和XML。而Aja

14、x的数据交互主要是通过XML进行的，而数据的呈现是通过HTML来实现的。因此学习使用JavaScript来操作DOM是非常必要的。n DOM操作主要分为这几个部分n 节点获取（包含节点导航）n 节点的增加，更改，删除n 节点属性的设置，获取和删除节点的获取n 在JavaScript中获取节点使用如下方法ngetElementById()按照id得到一个页面元素ngetElementsByName() 按照name属性取得到元素集合ngetElementsByTagName() 按照标记名称取得元素集合nparentNode 当前节点的父节点nchildNodes 当前节点子节点集合nfirst

15、Child 当前节点的第一个子节点nlastChild 当前节点的最后一个子节点nnextSibling 当前节点的后一个同级节点npreviousSibling 当前节点的前一个同级节点节点的增删改n 节点的增加删除和更改主要使用以下方法ncreateElement()创建一个节点nappendChild() 在当前节点中追加一个子节点nreplaceChild() 按照索引将当前节点的指定子节点替换为新的节点nreplaceNode() 将当前节点替换为新的节点nremoveChild() 移除当前节点的指定子节点nremoveNode() 将当前节点移除节点的访问n 可以获取指定节点的属性或者内容，需要使用以下方法n setAttribute() 设置当前元素的属性n getAttribute() 获取当前元素的特定属性的值n removeAttribute() 移除当前元素的特定属性n innerHTML 用来获得或设置当前节点的内容（包含html标记）n outerHTML 用来获得或设置当前节点的全部内容（包含节点自身的ht