(window对象子对象和文档对象).ppt

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

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

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

4、rent和top是没有意义的。 parent对象指相对于子窗口的父窗口。是一个相对的概念。只有在子窗口中才能获得到这个属性。 top对象指整个页面。也就是最外层的那个窗口。,Parent案例,此处超链接的target属性应该怎么写？,退出后台 Js代码是： parent.location=“login.html”,top对象,对于base窗口来说，他的top对象是A窗口 可以通过top.length来得到顶层窗口中含有的框架个数,Base窗口,A 窗 口,location子对象,Location 位置对象的 属性说明,location对象：用来代表特定窗口的URL信息。 URL的格式：prot

5、ocol/host:port/path?search#hash 其中常用的协议有：http、file、ftp、mailto、news 范例：,location对象的常用方法,location位置对象的方法,按下一个按钮后前往网易网站，那么使用下面的代码,history历史对象,用于存储客户端最近访问过的网址清单,history历史对象的属性,history历史对象的方法,框架对象,框架对象：是在同一屏幕上显示多个互不干涉的可滚动框架 的窗口。 frames属性：是由源文件中含有Frameset的Frame标签创 建的子框架的对象构成的数组。,parent.framesfr1 parent.fr

6、amesfr2 parent.framesfr3,parent.frames0 parent.frames1 parent.frames2,或,length属性： 可以使用窗口的length属性来查询框架中的子框架的数量,navigator对象,navigator对象用来获取浏览器的信息 常用的属性有 appName 浏览器的名称 cpuClass cpu平台 platform 操作系统 plugins 浏览器的插件信息 systemLanguage 操作系统语言 userLanguage 用户设置的浏览器语言 cookieEnabled 是否允许Cookie appVersion 浏览器版本

7、信息 userAgent 用户表头,文档对象,文档对象常用的属性,links集合,anchors集合,forms集合,title属性,文档对象在JavaScript中是一个很重要的对象。（document）,bgColor属性,images集合,URL属性,cookie子对象,links集合,是一个对应于源文件中相应顺序的链接对象构成的数组 如果文档里有三个链接标签即三个 那么可以使用如下的方法查询它们：,document.links0 document.links1 document.links2,anchors集合,如果你在文档里容纳了三个命名anchor，它们的名字分别 为anchor1

8、，anchor2和 anchor3，那么可以使用下面的代 码分别查询它们：,document.anchorsanchor1 document.anchorsanchor2 document.anchorsanchor3,document.anchors0 document.anchors1 document.anchors2,或,如果想要得到文档中anchors的数量，可以使用length属性 即调用：document.anchors.length。,forms集合,如果你在文档里容纳了三个命名forms，它们的属性名分别为 form1，form2和form3，那么可以使用下面的代码分别查询

9、它们,document.formsform1 document.formsform2 document.formsform3,document.forms0 document.forms1 document.forms2,或,如果想查询第二个form中一个名字为quantity的text对象的值 那么你可以使用document.forms1.quantity.value,images集合,文档对象的images集合可以用来获取整个页面内所有的图片， 也就是标记所定义的内容。也是通过下标或者索引来 访问,document.imagesimg1 document.imagesimg2 docume

10、nt.imagesimg3,document.images0 document.images1 document.images2,或,如果想要得到当前页面总共有多少个图片，可以使用length 属性。即调用：document.images.length。,title属性,title属性体现的是title标签的开始和结束之间的值 如果一个文档没有标题，则它的title属性是null,var newWindow = window.open() var docTitle = newWindow.document.title,将打开窗口的title属性的值赋值给docTitle,bgColor属性和U

11、RL属性,bgColor属性用来设置或获取当前页面的页面背景， 相当于body标记的bgcolor属性。,URL属性用来获取当前页面的地址 与前面提到的location对象的href相类似,cookie子对象,Cookie是一种以文件（Cookie文件）的形式保存在客户端硬盘的Cookies文件夹中的用户数据信息（Cookie数据）。Cookie文件由所访问的Web站点建立，以长久的保存客户端与Web站点间的会话数据，并且该Cookie数据只允许被所访问的Web站点进行读取。Cookie存储的方式为文本。,document.cookie = 关键字 = 值 ; expires = 有效日期 ;

12、.“ 有效日期为GMT格式字符串，使用Data对象的totoGMTString() 方法可以获得 还包含path、domain、secure属性,Cookie对象的使用,获取指定cookie的方法 由于cookie存储时为一段字符串，要获取指定的cookie，需要进行一些处理 function getCookie(key) var reg=new RegExp(key+=(;+),i); var rlt=document.cookie.match(reg); return rlt1; ,write()方法,write()方法是文档对象中一个很重要的方法 它是将一个或多个表达式写到指定窗口的文档

13、中,语法：document.write(expr1，.，prN) 。 参数：expr1，.，exprN 这些参数可以是任何 JavaScript的表达式,查看源码,javascript中的dom操作,DOM是目前新技术应用中非常热门的话题，目前非常HOT的Ajax应用就是基于DOM操作的高级应用。DOM是一个通用的模型。通用于HTML和XML。而Ajax的数据交互主要是通过XML进行的，而数据的呈现是通过HTML来实现的。因此学习使用JavaScript来操作DOM是非常必要的。 DOM操作主要分为这几个部分 节点获取（包含节点导航） 节点的增加，更改，删除 节点属性的设置，获取和删除,节点的

14、获取,在JavaScript中获取节点使用如下方法 getElementById()按照id得到一个页面元素 getElementsByName() 按照name属性取得到元素集合 getElementsByTagName() 按照标记名称取得元素集合 parentNode 当前节点的父节点 childNodes 当前节点子节点集合 firstChild 当前节点的第一个子节点 lastChild 当前节点的最后一个子节点 nextSibling 当前节点的后一个同级节点 previousSibling 当前节点的前一个同级节点,节点的增删改,节点的增加删除和更改主要使用以下方法 create

15、Element()创建一个节点 appendChild() 在当前节点中追加一个子节点 replaceChild() 按照索引将当前节点的指定子节点替换为新的节点 replaceNode() 将当前节点替换为新的节点 removeChild() 移除当前节点的指定子节点 removeNode() 将当前节点移除,节点的访问,可以获取指定节点的属性或者内容，需要使用以下方法 setAttribute() 设置当前元素的属性 getAttribute() 获取当前元素的特定属性的值 removeAttribute() 移除当前元素的特定属性 innerHTML 用来获得或设置当前节点的内容（包含html标记） outerHTML 用来获得或设置当前节点的全部内容（包含节点自身的html标记） i