Web程序设计(第4版)-第5章.ppt

5. 3 HTML DOM 5.3.1 HTML DOM概述 DOM将文件作为一个树形结构，树的每个节点表现为一个HTML标记或HTML标记内的文本项。 树形结构精确地描述了HTML文件中标记间以及文本项间的相互关联性。 这种关联性包括child（孩子）类型、parent（双亲）类型和兄弟（sibling）类型。 5. 3 HTML DOM 5.3.1 HTML DOM概述 DOM优点： ① 平台无关性，DOM提供跨平台的编程接口，是一种处理HTML和XML文件的标准API。 ② 可支持对HTML及XML两种文件的处理。 5. 3 HTML DOM 5.3.2 DOM节点树 采用DOM技术访问和更新HTML（或XML）页面内容时，首先依据HTML（或XML）源代码，推出页面的树形结构模型，然后按照树形结构的层次关系来操纵需要的属性。 例如，要更新页面上的文本项内容，如果采用DOM技术，则只要修改相关树节点都具有的nodeValue属性值即可。 5. 3 HTML DOM 5.3.2 DOM节点树 table tbody tr td商品类别/td td数量/td /tr tr td日用百货/td td10/td /tr tr td电器/td td20/td /tr /tbody /table 【例5-25】一个产生表格的HTML文件示例。 DOM将该文件作为如图所示的树形结构。 5. 3 HTML DOM 5.3.3 DOM树节点的属性 文字节点的内容，其他节点返回null 读/写 nodeValue 文字节点的内容，其他节点返回undefined 读/写 data 返回右兄弟节点对象 只读 nextSibling 返回左兄弟节点对象 只读 previousSibling 返回父节点对象 只读 parentNode 返回最后一个子节点的对象集合 只读 lastChild 返回第一个子节点的对象集合 只读 firstChild 返回节点的类型：1—标记；2—属性；3—文字 只读 nodeType 返回节点的标记名 只读 nodeName 说 明 访 问 属 性 DOM树节点的属性 DOM树形结构的节点有只读属性和读/写属性两类，通过只读属性可以浏览节点，并可获得节点的类型及名称等信息；通过读/写属性可以访问文字节点的内容。 5. 3 HTML DOM 5.3.3 DOM树节点的属性 【例5-26】分别用parentNode和previousSibling获得父节点和左兄弟节点，用nodeName属性输出节点的标记名。 5. 3 HTML DOM html headtitleDOM属性示例/title script language=JavaScript function Access( ) { ShowParentNode( ); ShowLeftSiblingNode( ); } function ShowParentNode( ) { var pnode=p1.parentNode; alert(pnode.nodeName); } function ShowLeftSiblingNode( ) { var prenode=p1.previousSibling; alert(prenode.nodeName); } /script /head body h2这是一个简单的DOM示例/h2 p id=p1 onClick=Access( ) 单击这里将弹出二个对话框，br 分别显示P标记的父节点和左兄弟节点的标记名称br /p /body /html 【例5-26】 5. 3 HTML DOM 5.3.3 DOM树节点的属性 DOM有两个对象集合：attributes和chileNodes。 attributes是节点内容的对象集合。 chiledNodes是子节点的对象集合，可使用从0开始的索引值进行访问。 可以对文字节点使用data或nodeValue属性访问和修改节点的内容，常用的是nodeValue属性。 5. 3 HTML DOM 5.3.4 访问DOM节点 用DOM的方法可以创建HTML或XML文件 并可以通过JavaScript程序随时改变文件的节点结构或内容，建立动态网页效果。 交换节点objNode1与objNode2 objNode1.swapNode(objNode2) 用节点objNew替换节点objNode objNode.replaceNode(objNe