如何深入学习HtmlDOM树的操作

这篇文章将为大家详细讲解有关如何深入学习Html DOM树的操作，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

创新互联专业为企业提供屯溪网站建设、屯溪做网站、屯溪网站设计、屯溪网站制作等企业网站建设、网页设计与制作、屯溪企业网站模板建站服务，10余年屯溪做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

你对HTML DOM树的概念是否了解，这里和大家分享一下，DOM是文档对象模型(Document Object Model），是基于浏览器编程的一套API接口，W3C出台的推荐标准，每个浏览器都有一些细微的差别，单纯的 Javascript要结合DOM才能做DHTML编程，才能做出漂亮的效果、应用于WEB。因此，必须要对DOM有一定的认识，才能把Javascript应用于WEB，或你的RIA应用当中，因为 DHTML本质上就是操作DOM树。

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){  varnodeRoot=document;//这个是根结点  varnodeHTML=nodeRoot.childNodes[0];//这个是html结点  varnodeBody=nodeHTML.childNodes[1];//body结点  varnodeDiv=nodeBody.childNodes[0];//DIV结点  varnodeText=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树的操作就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

网站标题：如何深入学习HtmlDOM树的操作
网站地址：https://www.cdcxhl.com/article40/iedcho.html

成都网站建设公司_创新互联，为您提供软件开发、做网站、Google、网站收录、电子商务、关键词优化

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容