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

第九章windowd对象的子对象和文档对象,课程回顾,了解DOM模型与BOM模型熟悉BOM中的顶级对象window了解window对象的常用属性和集合（document，location，frames，undefined）熟悉window对象的常用方法eval()isNaN()parseInt()parseFloat()熟悉window对象的对话框及窗口操作方法熟悉window对象的定时器的相关操作，包括setTimeout()、clearTimeout()、setInterval()、clearInterval()等函数的使用掌握JavaScript函数对象的结构、参数及调用掌握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对象可以用于确定open方法打开窗口的源窗口在使用open()方法打开新页面时候。可以通过opener属性来引用到父窗口。从而相互传值,self子对象,self对象实际上代表的是窗口自身，是用于对窗口对象自身的一些属性进行控制。在框架集应用或者对话框窗口中，使用self来引用自身能避免混乱例如在使用showModalDialog()方法,或showModelessDialog()方法新打开的对话框页面中，使用链接将会在新页面打开，因此需要将对话框的默认链接目标指向self来避免这种情况！代码：在head标记中加入,parent子对象和top子对象,这两个属性应用于框架页面中。没有框架的页面讨论parent和top是没有意义的。parent对象指相对于子窗口的父窗口。是一个相对的概念。只有在子窗口中才能获得到这个属性。top对象指整个页面。也就是最外层的那个窗口。,Parent案例,此处超链接的target属性应该怎么写？,退出后台Js代码是：parent.location=“login.html”,top对象,对于base窗口来说，他的top对象是A窗口可以通过top.length来得到顶层窗口中含有的框架个数,Base窗口,A窗口,location子对象,Location位置对象的属性说明,location对象：用来代表特定窗口的URL信息。URL的格式：protocol/host:port/path?search#hash其中常用的协议有：http、file、ftp、mailto、news范例：,location对象的常用方法,location位置对象的方法,按下一个按钮后前往网易网站，那么使用下面的代码,history历史对象,用于存储客户端最近访问过的网址清单,history历史对象的属性,history历史对象的方法,框架对象,框架对象：是在同一屏幕上显示多个互不干涉的可滚动框架的窗口。frames属性：是由源文件中含有Frameset的Frame标签创建的子框架的对象构成的数组。,parent.framesfr1parent.framesfr2parent.framesfr3,parent.frames0parent.frames1parent.frames2,或,length属性：可以使用窗口的length属性来查询框架中的子框架的数量,navigator对象,navigator对象用来获取浏览器的信息常用的属性有appName浏览器的名称cpuClasscpu平台platform操作系统plugins浏览器的插件信息systemLanguage操作系统语言userLanguage用户设置的浏览器语言cookieEnabled是否允许CookieappVersion浏览器版本信息userAgent用户表头,文档对象,文档对象常用的属性,links集合,anchors集合,forms集合,title属性,文档对象在JavaScript中是一个很重要的对象。（document）,bgColor属性,images集合,URL属性,cookie子对象,links集合,是一个对应于源文件中相应顺序的链接对象构成的数组如果文档里有三个链接标签即三个那么可以使用如下的方法查询它们：,document.links0document.links1document.links2,anchors集合,如果你在文档里容纳了三个命名anchor，它们的名字分别为anchor1，anchor2和anchor3，那么可以使用下面的代码分别查询它们：,document.anchorsanchor1document.anchorsanchor2document.anchorsanchor3,document.anchors0document.anchors1document.anchors2,或,如果想要得到文档中anchors的数量，可以使用length属性即调用：document.anchors.length。,forms集合,如果你在文档里容纳了三个命名forms，它们的属性名分别为form1，form2和form3，那么可以使用下面的代码分别查询它们,document.formsform1document.formsform2document.formsform3,document.forms0document.forms1document.forms2,或,如果想查询第二个form中一个名字为quantity的text对象的值那么你可以使用document.forms1.quantity.value,images集合,文档对象的images集合可以用来获取整个页面内所有的图片，也就是标记所定义的内容。也是通过下标或者索引来访问,document.imagesimg1document.imagesimg2document.imagesimg3,document.images0document.images1document.images2,或,如果想要得到当前页面总共有多少个图片，可以使用length属性。即调用：document.images.length。,title属性,title属性体现的是title标签的开始和结束之间的值如果一个文档没有标题，则它的title属性是null,varnewWindow=window.open()vardocTitle=newWindow.document.title,将打开窗口的title属性的值赋值给docTitle,bgColor属性和URL属性,bgColor属性用来设置或获取当前页面的页面背景，相当于body标记的bgcolor属性。,URL属性用来获取当前页面的地址与前面提到的location对象的href相类似,cookie子对象,Cookie是一种以文件（Cookie文件）的形式保存在客户端硬盘的Cookies文件夹中的用户数据信息（Cookie数据）。Cookie文件由所访问的Web站点建立，以长久的保存客户端与Web站点间的会话数据，并且该Cookie数据只允许被所访问的Web站点进行读取。Cookie存储的方式为文本。,document.cookie=关键字=值;expires=有效日期;.“有效日期为GMT格式字符串，使用Data对象的totoGMTString()方法可以获得还包含path、domain、secure属性,Cookie对象的使用,获取指定cookie的方法由于cookie存储时为一段字符串，要获取指定的cookie，需要进行一些处理functiongetCookie(key)varreg=newRegExp(key+=(;+),i);varrlt=document.cookie.match(reg);returnrlt1;,write()方法,write()方法是文档对象中一个很重要的方法它是将一个或多个表达式写到指定窗口的文档中,语法：document.write(expr1，.，prN)。参数：expr1，.，exprN这些参数可以是任何JavaScript的表达式,查看源码,javascript中的dom操作,DOM是目前新技术应用中非常热门的话题，目前非常HOT的Ajax应用就是基于DOM操作的高级应用。DOM是一个通用的模型。通用于HTML和XML。而Ajax的数据交互主要是通过XML进行的，而数据的呈现是通过HTML来实现的。因此学习使用JavaScript来操作DOM是非常必要的。DOM操作主要分为这几个部分节点获取（包含节点导航）节点的增加，更改，删除节点属性的设置，获取和删除,节点的获取,在JavaScript中获取节点使用如下方法getElementById()按照id得到一个页面元素getElementsByName()按照name属性取得到元素集合getElementsByTagName()按照标记名称取得元素集合parentNode当前节点的父节点childNodes当前节点子节点集合firstChild当前节点的第一个子节点lastChild当前节点的最后一个子节点nextSibling当前节点的后一个同级节点previousSibling当前节点的前一个同级节点,节点的增删改,节点的增加删除和更改主要使用以下方法createElement()创建一个节点appendChild()在当前节点中追加一个子节点replaceChild()按照索引将当前节点的指定子节点替换为新的节点replaceNode()将当前节点替换为新的节点removeChild()移除当前节点的指定子节点removeNode()将当前节点移除,节点的访问,可以获取指定节点的属性或者内容，需要使用以下方法setAttribute()设置当前元素的属性getAttribute()获取当前元素的特定属性的值removeAttribute()移除当前元素的特定属性innerHTML用来获得或设置当前节点的内容（包含html标记）outerHTML用来获得或设置当前节点的全部内容（包含节点自身的html标记）in