DOM
DOM是 Document Object Model(文档对象模型)的缩写,是W3C(万维网联盟)的标准。
DOM 定义了访问 HTML 和 XML 文档的标准:
“W3C 文档对象模型 (DOM) 是 中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分:
DOM 定义了访问 HTML 和 XML 文档的标准:
“W3C 文档对象模型 (DOM) 是 中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分:
- 核心 DOM - 针对任何结构化文档的标准模型
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
这篇文章主要讲HTML DOM
HTML DOM
HTML DOM 是:
换言之,HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
- HTML 的标准对象模型
- HTML 的标准编程接口
- W3C 标准
换言之,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代码:
它的DOM树是这样的:
节点关系
基本的节点关系有父子、同胞,衍生出来的有祖先—后代。父节点我们用parent表示,子节点用child,同胞用sibling。
- 在节点树中,顶端节点被称为根(root)
- 每个节点都有父节点、除了根(它没有父节点)
- 一个节点可拥有任意数量的子
- 同胞是拥有相同父节点的节点
这样就比较清楚了。