[转帖]理解DOM_什么是DOM_Android, Python及开发编程讨论区_Weblogic技术|Tuxedo技术|中间件技术|Oracle论坛|JAVA论坛|Linux/Unix技术|hadoop论坛_联动北方技术论坛  
网站首页 | 关于我们 | 服务中心 | 经验交流 | 公司荣誉 | 成功案例 | 合作伙伴 | 联系我们 |
联动北方-国内领先的云技术服务提供商
»  游客             当前位置:  论坛首页 »  自由讨论区 »  Android, Python及开发编程讨论区 »
总帖数
1
每页帖数
101/1页1
返回列表
0
发起投票  发起投票 发新帖子
查看: 3581 | 回复: 0   主题: [转帖]理解DOM_什么是DOM        下一篇 
lusxingbao
注册用户
等级:少校
经验:1487
发帖:100
精华:0
注册:2012-11-12
状态:离线
发送短消息息给lusxingbao 加好友    发送短消息息给lusxingbao 发消息
发表于: IP:您无权察看 2012-11-16 14:40:22 | [全部帖] [楼主帖] 楼主

什么是DOM

    DOM = document + object + model

    document即文档,也就是从<html>到</html>的部分。

     object即对象,对象有与之相关的属性、方法。如document.title这个属性代表了<title>Contents</title>;document.wrintln("someString")这个方法,就是在文档中写入一部分文本然后换行。

    model是一种模型,是对整个网页内容的刻画。

     通过DOM,javascript可以去访问和读取HTML页面,这个正是DOM的作用所在。

DOM如何映射HML页面

     DOM通过树这个数学模型刻画和映射HTML页面。

    HTML是一种包含了各种标签的标记型语言,通过开标签如<p>表示一个结构的开始,通过闭标签如</p>表示一个结构的结束。可以把开标签看做盒子,将闭标签看做盒子的盖子:通过“盒子”来承载内容,或者什么都不装,作为一个空盒子。

     这样,<p>HuJin</p>就可以看做一个p盒子,其中装了“HuJin”这个文本字符串。

     当然,盒子里面也可以装盒子,想俄罗斯套娃一样。比如:

Html代码 


  1. <div>   
  2.     <p>HuJin</p>   
  3. </div>   


     这是一个div盒子,里面装了一个p盒子,p盒子里面装了“HuJin”这个文本字符串。

     我们很容易从几乎所有的HTML里看出这种从属关系,因为它们都遵守了一定的缩进规定。一层层向外看,你会找到<html>和</html>这两个标签,它们没有缩进,是最外面的大盒子。换句话说,你拿走了这个叫做html的大盒子,所有里面的盒子都被你一起拿走了,所以html代表了这个html页面的内容。

     不管把标签描述成盒子还是容器,我们发现,标签之间是具有某种关系的。家谱树可以很好的描述这种关系。

     家谱树可以很好地表示从属关系,下面是一个例子:

Html代码 


  1. <html>   
  2.     <head>   
  3.         <title>DOM</title>   
  4.     </head>   
  5.     <body>   
  6.         <p>HuJin</p>   
  7.         <ul>   
  8.             <li>lovely</li>   
  9.             <li>bonny</li>   
  10.         </ul>   
  11.     </body>   
  12. </html>   


北京联动北方科技有限公司

     图中,蓝色线代表从属和包含关系,从属关系为从下到上,包含关系为从上到下。html这个标签包含了所有其他标签,本身不被任何标签所包含,所以它是这颗家谱树的根,也被称为根节点;head与body两个标签并没有从属关系,并且处在同一级(level)之上,他们是兄弟关系(sibling),并成为兄弟节点;title从属于head标签,title是head的子节点(child),而head是title的父节点(parent)。

     这样我们就可以通过家谱树这种结构来很好地映射这整个文档。DOM正是通过这种映射方式,使得javascript可以去访问和操纵html页面。

     最后这幅图表示html,DOM和javascript的关系。

北京联动北方科技有限公司




赞(0)    操作        顶端 
总帖数
1
每页帖数
101/1页1
返回列表
发新帖子
请输入验证码: 点击刷新验证码
您需要登录后才可以回帖 登录 | 注册
技术讨论