DOM

动态网页设计第二讲DOM编程许鑫[e-mail]编程BOM体系结构BOM编程•BOM编程–BrowserObjectModel–JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的，为了便于对浏览器的操作，javascript封装了对浏览器的各个对象使得开发者可以快速的操作浏览器。•常见BOM对象•特点–操作简单。window对象•window对象：–是JavaScript层级中的顶层对象。–代表一个浏览器窗口或一个框架。–对象会在body或frameset每次出现时被自动创建。(body和frameset不能同时存在)•属性：–frames获取当前窗口包含框架页(数组)–closed返回当前窗口是否被关闭–defaultStatus当前窗口状态栏–innerheightinnerwidth窗口的文档显示区的高度和宽度–self、top、parent当前窗口、顶层窗口、父窗口•方法：–close()–open()–setTimeout()和clearTimeout()–setInterval()和clearInterval()•练习：–取消关闭窗口时的确认对话框？–打开窗口页面的时候全屏打开？varfs=window.self.parent.frames;alert(fs.length);alert(fs[0].name);alert(fs[0].location);alert(fs[2].name);alert(fs[left].name);alert(fs[left].location);documen对象•document对象：–该对象代表整个文档页面window代表浏览器•属性：–title–bgColor–fgColor–linkColor–charset•方法：–document.write()//动态向页面写入内容–document.createElement(Tag)//创建一个html标签对象–document.getElementById(ID)//获得指定ID值的对象–document.getElementsByName(Name)//获得指定Name值的对象集合（数组）–Document.getElementsByTagName(标签名称)//获取指定的标签元素集合–document.body.appendChild(oTag)//添加子节点•对象事件：–document.body.onclick=func//鼠标指针单击对象是触发–document.body.onmouseover=func//鼠标指针移到对象时触发–document.body.onmouseout=func//鼠标指针移出对象时触发document.bgColor=yellow;document.title=Document;document.characterSet=utf-8;documen对象•document对象：–该对象代表整个文档页面•对象的集合：–all获取页面所有元素对象–forms获取页面所有表单对象–images获取页面所有图片对象–links获取所有超链接navigator对象•navigator对象：–代表浏览器对象–封装了浏览器的信息•属性：–appCodeName:返回浏览器的代码名–appMinorVersion:返回浏览器的次级版本–appName:返回浏览器的名称–appVersion:返回浏览器的平台和版本信息–browserLanguage:返回当前浏览器的语言•方法：–javaEnabled()screen对象•screen对象：–包含客户端显示屏的信息。•属性：–availHeight和availWidth–Height和widthhistory对象•history对象：–代表浏览器历史记录对象–封装了浏览器浏览过的网页信息•获取：–使用window对象获取该对象•属性：–length•方法：–back()–forward()–go()history.go(-2);//后退2history.go(2)//前进2•练习：–实现页面上中的返回效果？–模拟浏览器中的前进和后退？location对象•location对象：–代表浏览器地址栏对象–封装了地址栏中的地址信息•获取：–使用window对象获取该对象•属性：–host–hostname–port–protocol–href•练习：–实现页面的跳转？–该页面的实现需要使用服务器？–=javascriptalert(window.location);alert(window.location.host);alert(window.location.hostname);alert(window.location.port);alert(window.location.protocol);window.location.href=编程DOM树formname=f1ahref=#itcast/apsometext/pdivmydiv/div/formchildNodes：获取页面元素的直接子元素，以上为4，删除空格后为3HTMLDOM(获取节点)•HTMLDOM定义了访问和操作HTML文档的标准方法。•document–代表当前页面的整个文档树•访问属性–all–forms–Images–body•访问方法(最常用的DOM方法)–getElementById()返回对拥有指定id的第一个对象的引用。–getElementsByName()返回带有指定名称的对象集合。–getElementsByTagName()返回带有指定标签名的对象集合。–getAttribute()返回属性值–getAttributeNode()返回指定属性名的节点对象HTMLDOM(添加、设置和删除节点)•给文档树添加节点–获取目标节点varby=document.forms[0]–创建新节点varip=document.createElement(input);//document.createTextNode();–设置新节点ip.setAttribute(type,file);–建立节点关系by.appendChild(ip);•给文档树删除节点–获取要删除的节点–获取要删除节点的父节点–解除关系varlen=0;functiondeleteele(){varfs=document.getElementsByName(file1);varform=document.forms[0];varbs=document.getElementsByTagName(br);len=fs.length-1;if(len0){form.removeChild(bs[len]);form.removeChild(fs[len]);}｝练习HTMLDOM(节点关系)•parentNode(返回当前节点的父节点)•childNodes(返回指定节点的所有子节点)•nodeType(返回节点的类型，一般是整数)–元素element1–属性attr2–文本text3–注释comments8–文档document9•nodeName(返回节点的名称，如：INPUT、#text)–元素节点的nodeName是标签名称–属性节点的nodeName是属性名称–文本节点的nodeName永远是#text–文档节点的nodeName永远是#document•nodeValue(返回文本节点的值)–对于文本节点，nodeValue属性包含文本。–对于属性节点，nodeValue属性包含属性值。–nodeValue属性对于文档节点和元素节点是不可用的。•练习–见备注扩展属性HTMLDOM(节点关系)•firstChild和lastChild–获取当前节点的第一个或最后一个节点•parentNode–获取当前元素的父节点•nextSibling–获取当前节点的下一个节点•previousSibling–获取当前节点的上一个节点•注意：–IE将跳过在节点之间产生的空格文档节点（如：换行字符），而Mozilla不会这样——FF会把诸如空格换行之类的排版元素视作节点读取，因此，在ie中用nextSibling便可读取到的下一个节点元素，在FF中就需要这样写：nextSibling.nextSibling了。扩展属性DOM关系图解formname=f1ahref=#itcast/apsometext/pdivmydiv/div/form练习0•新建一个li广州/li节点,将该节点插入到li北京/li节点之前？•单击按钮触发两个li之间的交换？•双击任意一个li对其内容进行修改？innerText(转义HTML)、innerHTML(解释HTML)•几乎所有DOM元素都有innerText、innerHTML属性（注意大小写），分别是元素标签内内容的文本表示形式和HTML源代码，这两个属性是可读可写的。–ahref=“”id=“link1”河fontcolor=“Red”南/font农大/a–inputtype=buttonvalue=inner*onclick=alert(document.getElementById('link1').innerText);alert(document.getElementById('link1').innerHTML);/•用innerHTML也可以替代createElement，属于简单、粗放型、后果自负的创建–functioncreatelink(){–vardivMain=document.getElementById(divMain);–divMain.innerHTML=ahref='如鹏网/a;–}–span/的innerHTML和span/span的innerHTML不一样。//建议，在使用之前要保证标签具有开始和结束标记，否则，会出现一下意想不到的后果。练习2：•表单中生日字段的写法？functioncreatyear(){vary=document.getElementsByName(year)[0];vardate=newDate();varyear=date.getYear();//2012100varstart=year-100;varend=year-20;for(vari=start;i=end;i++){varop=document.createElement(option);op.innerHTML=i;op.setAttribute(value,i);y.appendChild(op);}}练习3：•校验码的实现？练习4•实现页面换肤效果？functiontheme(th){vartext=th.innerHTML;varlin=window.document.getElementsByTagName(link)[1];if(text==绿)lin.href=green.css;if(text==红)lin.href=red.css;}练习5•图片查看器？练习6内容切换为什么要学习javascript操作dom1•Javascript最终是要操作html页面，让html变成dhtml，而操作html页面就要用到dom。Dom就是把html页面模拟成一个对象，就像XDocument一样，把xml模拟成了一个对象，提供了操作各个节点的方法，直接调用就可以了。•如果javascript只是执行一些计算、循环等操作，而不能操作h