JavaScript DOM

DOM

DOM是 Document Object Model(文档对象模型)的缩写,是W3C(万维网联盟)的标准。
DOM 定义了访问 HTML 和 XML 文档的标准:
“W3C 文档对象模型 (DOM) 是 中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分:
  • 核心 DOM - 针对任何结构化文档的标准模型
  • XML DOM - 针对 XML 文档的标准模型
  • HTML DOM - 针对 HTML 文档的标准模型

这篇文章主要讲HTML DOM

HTML DOM

HTML DOM 是:
  • HTML 的标准对象模型
  • HTML 的标准编程接口
  • W3C 标准
HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法。
换言之,HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

JavaScript DOM

前面讲过,DOM定义了访问HTML和XML文档的标准:“W3C 文档对象模型 (DOM) 是 中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
注意粗体字部分,DOM是中立于平台和语言的接口,也就是任意平台、任意语言中,都有相应的DOM接口。但在我们这篇文章中,我们主要的还是采用浏览器平台、JavaScript语言中的DOM接口来做阐述,这也是目前使用最频繁的接口了。
只是想提醒大家,不要以偏概全,认为只有JavaScript中的DOM才是真正的DOM。下文中,我们说的DOM接口也全部是JavaScript DOM和HTML DOM中的内容。
学习这部分需要大家对HTML、CSS、JS有基础的认识和了解。

简单的DOM树

我们之前说过一句话,也希望大家记住这句话:“有嵌套的地方就有父子关系。”
HTML中允许嵌套,并且允许多重嵌套,多种父子关系就形成了一棵树,我们叫它DOM树。
我们先来看一份简单的HTML代码:
[html]  view plain  copy
  1. <html>  
  2.     <head>  
  3.         <title>文档标题</title>  
  4.     </head>  
  5.     <body>  
  6.         <a href="#">我的链接</a>  
  7.         <h1>我的标题</h1>  
  8.     </body>  
  9. </html>  
它的DOM树是这样的:
HTML DOM Node Tree

节点关系

基本的节点关系有父子、同胞,衍生出来的有祖先—后代。父节点我们用parent表示,子节点用child,同胞用sibling。
  • 在节点树中,顶端节点被称为根(root)
  • 每个节点都有父节点、除了根(它没有父节点)
  • 一个节点可拥有任意数量的子
  • 同胞是拥有相同父节点的节点
我们将刚才的DOM树截取掉一部分,
DOM 节点关系
这样就比较清楚了。
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值