如何深入学习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如下

  never-online'swebsite   
tutorialofDHTMLandjavascriptprogramming
  

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

             html
           body       head
       divt               itle
     文本                     文本

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

操作DOM树

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

示例代码:

  never-online'swebsite    
tutorialofDHTMLandjavascriptprogramming
   

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

注:

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

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

关于如何深入学习Html DOM树的操作就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


分享名称:如何深入学习HtmlDOM树的操作
URL地址:http://myzitong.com/article/iedcho.html