如何深入学习Html DOM树的操作
这篇文章将为大家详细讲解有关如何深入学习Html DOM树的操作，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
你对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树的操作就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
