深入学习Html DOM树的操作
创始人
2024-07-15 05:10:26
0

你对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.  
  2.  
  3. never-online'swebsite 
  4.  
  5.  
  6. tutorialofDHTMLandjavascriptprogramming
     
  7.  
  8.  
  9.  

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

                  html
           body       head
       divt               itle
     文本                     文本

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

操作DOM树

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

示例代码:

  1.  
  2.  
  3. never-online'swebsite 
  4.  
  5.  
  6.  
  7. tutorialofDHTMLandjavascriptprogramming
     
  8. type="button"value="change"/> 
  9.  
  10.  
  11.  

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

注:

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

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

【编辑推荐】

  1. Html DOM树的结构和访问
  2. Java ME多模搜索技术初探
  3. JavaScript获取HTML DOM节点元素详解
  4. 如何解决Java ME设备碎片问题
  5. HTML DOM与XML DOM的区别与联系探究

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
Windows恶意软件20年“... 在Windows的早期年代,病毒游走于系统之间,偶尔删除文件(但被删除的文件几乎都是可恢复的),并弹...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
着眼MAC地址,解救无法享受D... 在安装了DHCP服务器的局域网环境中,每一台工作站在上网之前,都要先从DHCP服务器那里享受到地址动...
为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...