深入学习Html DOM树的操作 / 木子杰软件教程

操作方法

01

本文向大家简单介绍一下HTML DOM树的概念,我们必须要对DOM模型有一定的认识,才能把JavaScript应用于WEB,或你的RIA应用当中,因为 DHTML本质上就是操作DOM树。 DOM 是文档对象模型(Document Object Model),是基于浏览器编程的一套API接口,W3C出台的推荐标准,每个浏览器都有一些细微的差别,单纯的 Javascript要结合DOM才能做DHTML编程,才能做出漂亮的效果、应用于WEB。因此,必须要对DOM有一定的认识,才能把 Javascript应用于WEB,或你的RIA应用当中,因为 DHTML本质上就是操作DOM树。 DOM树的根统一为文档根—document,DOM既然是树状结构,那么他们自然有如下的几种关系: ◆根结点(document) ◆父结点(parentNode) ◆子结点(childNodes) 兄弟结点兄弟结点 (sibling)(sibling)例子: 假设网页的HTML如下 <html> <head> <title>never-online'swebsite</title> </head> <body> <div>tutorialofDHTMLandjavascriptprogramming</div> </body> </html> 我们参照树的概念,画出该HTML文档结构的DOM树: html body head divt itle 文本文本从上面的图示可以看出html有两个子结点,而html就是这两个子节点的父结点,head有节点title,title下有一个文本节点,doby下有节点div,div下有一个文本节点。操作DOM树开篇已经说过,DHTML本质就是操作DOM树。如何操作它呢?假设我要改变上面HTML文档中div结点的文本,如何做? 示例代码: <html> <head> <title>never-online'swebsite</title> <script> functionchangedivText(strText){ var nodeRoot=document;//这个是根结点 var nodeHTML=nodeRoot.childNodes[0];//这个是html结点 var nodeBody=nodeHTML.childNodes[1];//body结点 var nodeDiv=nodeBody.childNodes[0];//DIV结点 var nodeText=nodeDiv.childNodes[0];//文本结点' nodeText.data=strText;//文本节点有data这个属性, 因此我们可以改变这个属性,也就成功的操作了DOM树中的一个结点了 } </script> </head> <body> <div>tutorialofDHTMLandjavascriptprogramming</div> <inputonclickinputonclick="changedivText('change?')" type="button"value="change"/> </body> </html> 从上面的示例可以看出,我们可以用上面的这种方法操作DOM树上的任一节点。注: 1.跨域除外,跨域通常是在操作frame上,简单的说,就是两个frame不属于同一域名。 2.上面的操作为了演示,采用的方法是从根结点一直到文本结点的遍历,在DOM方法上,有更简洁的方法,这些以后会有更多示例加以说明。

深入学习Html DOM树的操作

操作方法

相关推荐