dommodel.docx

1、dommodel1 课程名称： DOM模型详解2 知识点概述2.1、上次课程2.2、作业讲解2.3、本次预备讲解的知识点3、具体内容 DOM是文档对象模型(Document Object Model)的简称，借助与DOM模型，可以将一个结构化的文档转换成DOM树，程序可以访问，修改树里的节点，也可增加树里的节点，在程序操作这棵DOM树时，结构化的文档也随之动态改变。掌握了DOM编程模型，就拥有了使用JavaScript脚本动态修改XHTML页面的能力。 DOM模型不仅可以操作XHTML文档，还可以操作XML文档3.1、DOM模型概述 XHTML文档只有一个根节点，而其他节点以根节点的子节点或孙

2、子节点的形式存在，最终形成一个结构化文档。DOM模型则用于导航，访问结构化文档的节点，并提供新增，修改，删除结构化文档的能力。DOM并不是一种技术，它只是访问结构化文档的一种思想（方式），基于这种思想，各种语言都有自己的DOM解析器。DOM解析器的作用就是完成结构化文档和DOM树之间的转换关系。对与支持DOM模型的浏览器，当浏览器转入一个XHTML页面后，自动得到对应的DOM树,通过JavaScript脚本修改这颗DOM树时，浏览器里的XHTML页面会随之改变如图：3.2、DOM模型和XHTML文档 DOM为常用的XHTML元素提供了一套完整的继承体系.从页面的document对象到每个常用的

3、XHTML元素，DOM模型提供了对应的类。每个类都提供了相应的方法来操作DOM元素本身,属性及其子元素，DOM模型允许以树的方式操作XHTML文档中的每一个元素。3.2.1、XHTML元素之间的继承图 DOM模型里的XHTML元素的继承关系，如下图：常用XHTML元素NO对象说明1HTMLDocument对应XHTML文档本身2HTMLBodyElement对应XHTML文档的3HTMLDivElement对应XHTML文档的4HTMLFormElement对应XHTML文档的表单5HTMLSelectElement对应XHTML文档的列表，下拉菜单6HTMLOptionElement对应XH

4、TML文档的列表，下拉菜单的选项7HTMLInputElement对应XHTML文档的单行文本框，密码框，按钮等8HTMLTableElement对应XHTML文档的9HTMLTableCaptionElement对应XHTML文档的表格的标题10HTMLTableColElement对应XHTML文档的表格的列11HTMLTableCellElement对应XHTML文档的表格的单元格12HTMLOlElement对应XHTML文档的13HTMLULElement对应XHTML文档的14HTMLLIElement对应XHTML文档的3.2.3、XHTML元素之间常见的包含关系 从图中可以看出

5、，HTMLDocument对象作为整个HTML文档的最大对象，里面可能包含一个HTMLBodyElement对象，HTML文档中还有两个对象体系：表单对象和表格对象。 表单对象里可以包含基本的输入对象，还可以包含元素，元素还可以包含多个元素。 表格对象可以包含标题控件(HTMLTableCaptionElement)，还可以包含多个表格行控件（HTMLColElement），每个表格行又可以包含多个单元格控件(HTMLTableCellElement).3.3、访问XHTML元素 DOM提供了两种方式来访问XHTML元素：1、 根据ID来访问XHTML元素2、 利用节点关系来访问XHTML元素

6、 3.3.1、根据ID访问XHTML元素 根据ID访问XHTML元素主要由如下方法实现：NO方法说明1document.getElementById(id val)返回文档中Id属性值为val的XHTML元素示例代码：3.3.2、利用节点关系来访问XHTML元素利用节点关系访问XHTML元素的常用属性或方法如下：NO属性/方法说明1parentNode返回当前节点的父节点，只读属性2previousSlibling返回当前节点的前一个兄弟节点，只读属性3nextSibling返回当前节点的后一个兄弟节点4childNodes返回当前节点的所有子节点5getElementsByTagName(t

7、agName)返回当前节点的具有指定标签名的所有子节点6firstChild返回当前节点的第一个子节点7lastChild返回当前节点的最后一个子节点8示例代码：（）3.3.3、访问表单域属性 表单在DOM中由HTMLFormElement对象表示，该对象除了可以调用前面介绍的基本属性和方法还有如下属性和方法：（详解API）NO属性/方法1Action2Elements3Length4Method5Target6reset()7submit()示例代码：（）3.3.4、访问列表框，下拉菜单 HTMLSelectElement代表一个列表框或下拉菜单，常见的属性和方法如下：NO属性/方法说明1F

8、orm2Length3Options4selectedIndex5Type6Select.optionsindex7 HTMLOptionElement代表列表框，下拉框的选项。常见的属性和方法如下：NO属性/方法1Form2defaultSelected3index4selected5text6Value示例代码：3.3.5、访问表格子元素 HTMLTableElement代表表格，常用的属性和方法如下：NO属性/方法1Caption2Rows3tBodies4tFoot5tHead6Table.rowsindex7 HTMLTableRowElement代表表格行，常用属性和方法如下：NO

9、属性/方法1Cells2rowIndex3selectionRowIndex4 HTMLTableCellElement代表单元格，常用属性和方法如下：NO属性/方法1cellIndex2示例代码：（）3.4、修改XHTML元素 通过修改XHTML元素就可以实现动态更新XHTML页面的目的了，修改节点通常就是修改节点的内容，节点的属性，节点的CSS样式。 修改XHTML元素通常通过修改如下几个常用属性来实现：1、 innerHTML：大部分XHTML页面元素的显示内容由该属性控制。(、)2、 value：少量的表单控件的显示内容有该属性控制。(、)3、 className：修改XHTML元素的

10、CSS样式，该属性的合法值是一个class选择器名4、 style：修改XHTML元素的内联样式5、 optionsindex：直接对元素的指定列表项赋值，可改变列表框，下拉菜单的指定列表项。示例代码：（）3.5、新增XHTML元素 JavaScript脚本可以为DOM动态新增节点，程序为DOM树新增节点时，页面会动态地新增XHTML元素，当需要为页面新增XHTML元素时，可按照如下两个步骤操作：1、 创建或复制节点2、 直接添加新节点3.5.1、 创建或复制节点 创建节点通常借助与document对象的createElement方法，语法如下：document.createElement(T

11、ag)：创建Tag标签对应的节点。示例代码：（）3.5.2、添加节点 当一个节点创建成功后，将节点添加到DOM中才行，对于普通的节点，可采用Node对象的如下方法添加节点：NO方法1appendChild(Node newNode)2insertBefore(Node newNode, Node refNode)3replaceChild(Node newNode, Node oldChild)示例代码：（）3.5.3、为列表框，下拉菜单增加选项 为列表框，下拉菜单添加子节点，有如下两个方法：1、 调用HTMLSelectElement的add()方法添加选项2、 直接为的指定选项赋值HTML

12、SelectElement中添加新选项方法如下：NO方法说明1add(HTMLOptionElement option, HTMLOptionElement before)示例代码：（）IE6中不允许使用add()方法时指定最后一个参数为null，还可直接创建Option的方式创建下拉选项。可使用如下构造器：NO构造器1New Option(text, value, defaultSelected, selected)该构造器中4个参数说明如下：|- text： 该选项的文本，即该选项所呈现的内容|- value：选中该选项的值|- defaultSelected：设置默认是否选中该选项|-

13、selected：设置该选项当前是否被选中示例代码：（）3.5.4、动态添加表格内容 HTMLTableElement对象有如下方法添加元素：NO方法说明1insertRow(index)2createCaption()3createTFoot()4createTHead()5 HTMLTableRowElement对象代表表格的行，该对象包含如下方法添加单元格：NO方法说明1insertCell(long index)示例代码：（）3.6、删除XHTML元素 删除XHTML元素也是通过节点来完成的，对于普通的XHTML元素，可用通用的方法来删除节点，而列表框，下拉菜单，表格，则有额外的方法来

14、删除XHTML元素。3.6.1、删除节点 删除节点通常借助于父节点，Node对象提供了如下方法来删除节点：NO方法1removeChild(oldNode)从父节点中删除该子节点后，该子节点代表的内容也消失示例代码：（）3.6.2、删除列表框，下拉菜单的选项 删除列表框，下拉菜单的选项有两种方法： |- 利用HTMLSelectElement对象的remove()方法来产出选项 |- 直接将指定选项赋值为null即可示例代码：（）3.6.3、删除表格的行或单元格 删除表格的指定表格行使用HTMLTableElement对象的如下方法：NO方法1deleteRow(long index) 删除表

15、格行的指定单元格使用HTMLRowElement对象的如下方法：NO方法1deleteCell(long index)示例代码：（）3.7、传统的DHTML模型 DOM出现之前，javaScript使用的是传统的DHTML模型来访问，动态更新XHTM页面.，在DHTML模型里，各元素之间有严格的包含关系，js通过他们的id和name属性来访问他们。使用DHTML对象模型来访问和更新XHTML页面时，需查阅相关技术手册,因为XHTML元素很多，每个XHTML元素都有很多独特的属性，方法和事件DHTML对象模型不包含Tree结构，因此不具备对象相互导航功能。理论上DOM模型和DHTML模型存在差异

16、，但实际应用中我们不会区分那种方式属于DOM模型，那种方式属于DHTML，考虑最多的是如何跨浏览器，如何保持高性能。DHTML虽然没有提供一种完备的树形结构，却也提供了一种简单的方法来访问页面中的各个子元素。这种访问主要通过DHTML的包含关系来实现，如下图：DHTML 是 Dynamic HTML（动态 HTML）的缩写，是 HTML、CSS、Javascript 这三种技术的结合。DOM 是 Document Object Model（文档对象模型）的缩写，是一种应用编程接口。DHTML 出现得较早。DOM 是在 DHTML 之后出现的，DHTML 没有统一的标准，各浏览器有各自的 DHT

17、ML。DOM 已经得到 W3C 的承认，并有新的标准，DOM 版本越往后，各浏览器对 DOM 的支持越相近。也即 DOM 比 DHTML 更规范。DHTML 只适用于 Web 文档。DOM 则涵盖了使用任何一种支持 DOM API 的程序设计语言去处理任何一种标记文档的所有情况，比如：ASP 处理 XML 文档，JavaScript 处理 Web 文档。也即 DOM 比 DHTML 功能强大。所以，从现在开始，逐渐放弃 DHTML，投身到 DOM 中来。示例代码：（）3.8、使用window对象 window对象是整个javascript脚本运行的顶层对象，定义全局变量是作为window对象的

18、一个属性存在，定义一个普通的函数时，是作为windows对象的方法存在。 Window提供例如如下常用方法，这些方法可直接在JavaScript脚本中直接使用：NO方法1alert()2confirm()3prompt()4close()5focus()6blur()7moveby()8moveTo()9open()10print11risizeBy()/resizeTo()12setInterval()/clearInterval() Window提供了如下常用属性：NO属性1closed2defaultStatus、status3document4Frames5history6Locati

19、on7Name8Navigator9Parent10Screen11Self12Top示例代码：（）3.8.1、访问历史 Window的histroy属性是一个History对象，该对象表示当前窗口的浏览历史，支持如下几个方法：NO方法1back()2forward3go(int value)示例代码：3.8.2、浏览器对象 Window对象有个navigator属性，该属性对应于Navigator对象，该对象代表浏览该页面使用的浏览器，该对象在不同平台上的信息并不完全相同。常用属性如下：NO属性1appName2appValue3Platform示例代码：（）3.8.3、访问页面URL Wi

20、ndow对象还包含了location属性，该属性可以用于访问该窗口或Frame所装载文档的地址。Location对象包含了如下常用属性：NO属性1hostname2href3host4Port5pathname6Protocol示例代码：3.8.4、客户机屏幕信息 Window对象中的Screen属性，它返回的是当前浏览器的屏幕对象，可用于获取用户屏幕当前的大小，色深，分辨率等参数。常见属性如下：NO属性1Width2Hight3colorDepth示例代码：3.8.5、弹出新窗口 Window的open（）方法用于打开一个新窗口，如果结合screen对象的属性，可将打开的窗口放大到满屏效果。

21、示例代码：（）3.8.6、确认框和输入对话框 Window对象提供了还提供了如下两种对话框： |- confirm：用于取得用于确认(confirm)的确认框 |- prompt：用于获得用户输入(propmt)的输入对话框示例代码：（）3.8.7、使用定时器 Window提供了如下4个方法来支持定时器：NO方法1setInterval()2clearInterval()3setTimeout()4Cleartimeout()示例代码：（）3.9、使用document对象 Document对象即是HTMLDocument类的一个实例，也是DHTML模型中的一个对象，因此，javascript的

22、document对象即可作为HTMLDocument使用，也可以作为DHTML的document使用。该对象除了可使用标准DOM模型的方法，还可使用如下常用方法：NO方法1Close()2Open()3Write()4Writeln()常用属性如下：NO属性1alinkColor、linkColor、vlinkColor、bgColor、fgColor2All3Anchors4Cookie5documentElement6Forms7Frames8Images9lastModified10Links11Location12Referrer13Scripts14styleSheets15Titl

23、e16URL3.9.1、动态页面 借助于document对象的Open和write方法，可以动态生成一个页面。示例代码：（）3.9.2、读写Cookie Cookie是一些name=value对数据，这些数据可由浏览器写入客户机硬盘，也可由浏览器从客户机硬盘读取。Cookie通常用于持久记录客户的某些信息，比如客户的用户名及客户的喜好等。 通常而言，读写Cookie都是由服务器程序控制，但实际读写Cookie的依然是浏览器，而javaScript一样可以控制浏览器读写Cookie。使用JavaScript控制浏览器写Cookie，直接给document.cookie属性赋值即可，这个属必须为如下格式：=，除此之外，添加cookie时还可以指定如下几个属性：NO属性说明1max-age指定该cookie存活的最长有效期2expires指定cookie的过期时间3path指定该cookie的路径4domain指定该cookie属于哪个域5secure指定该cookie的安全属性示例代码：（）4 总结5 预习任务6 作业