软件开发培训班 >> 编程开发 >> JavaScript


深入学习Html DOM树的操作

　　本文标签：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如下

  1. <html> 
  2. <head> 
  3. <title>never-onlineswebsitetitle> 
  4. head> 
  5. <body> 
  6. <div>tutorialofDHTMLandjavascriptprogrammingdiv> 
  7. body> 
  8. html> 
  9.  

　　我们参照树的概念，画出该HTML文档结构的DOM树：

　　             html
           body       head
       divt               itle
     文本                     文本

　　从上面的图示可以看出html有两个子结点，而html就是这两个子节点的父结点，head有节点title，title下有一个文本节点，doby下有节点div，div下有一个文本节点  。

　　操作DOM树

　　开篇已经说过，DHTML本质就是操作DOM树  。如何操作它呢？假设我要改变上面HTML文档中div结点的文本，如何做？

　　示例代码：

  1. <html> 
  2. <head> 
  3. <title>never-onlineswebsitetitle> 
  4. <script> 
  5. functionchangedivText(strText){  
  6. varnodeRoot=document;//这个是根结点  
  7. varnodeHTML=nodeRoot.childNodes[0];//这个是html结点  
  8. varnodeBody=nodeHTML.childNodes[1];//body结点  
  9. varnodeDiv=nodeBody.childNodes[0];//DIV结点  
  10. varnodeText=nodeDiv.childNodes[0];//文本结点  
  11. nodeText.data=strText;//文本节点有data这个属性，  
  12. 因此我们可以改变这个属性，也就成功的操作了DOM树中的一个结点了  
  13. }  
  14. script> 
  15. head> 
  16. <body> 
  17. <div>tutorialofDHTMLandjavascriptprogrammingdiv> 
  18. <inputonclickinputonclick="changedivText(change?)"
  19. type="button"value="change"/> 
  20. body> 
  21. html> 
  22.  

　　从上面的示例可以看出，我们可以用上面的这种方法操作DOM树上的任一节点  。

　　注：

　　1.跨域除外，跨域通常是在操作frame上，简单的说，就是两个frame不属于同一域名  。

　　2.上面的操作为了演示，采用的方法是从根结点一直到文本结点的遍历，在DOM方法上，有更简洁的方法，这些以后会有更多示例加以说明  。