l 定义
DOM即文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展标志语言的标准编程接口。
DOM 定义了访问 HTML 和XML 文档的标准:
“W3C 文档对象模型(DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
我们主要讲述HTMLDOM,通过 JavaScript,您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西,JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口,连同对 HTML 元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)。
l DOM节点
在HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的 HTML。一个HTML文档包含的节点有:
A、整个文档是一个文档节点
B、每个 HTML 元素是元素节点
C、HTML 元素内的文本是文本节点
D、每个 HTML 属性是属性节点
E、注释是注释节点
² 节点树
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树。如下图:
通过 HTML DOM,树中的所有节点均可通过 JavaScript 进行访问。我们可以通过在客户端写客户端脚本来对所有的节点进行操作,包括对所有 HTML 元素(节点)的修改,创建或删除。
² 节点的分类
节点主要分为三类:元素节点、属性节点、文本节点。
如图:
² 节点的层级关系
我们知道节点树中的各个节点之间拥有层级关系,比如,<html>下有<head>和<body>,这样我们称<html>为其父节点,而后两者为之子节点,后两者互为同胞。简易示意图如下:
总结:
1.在节点树中,顶端节点被称为根(root)
2.每个节点都有父节点、除了根(它没有父节点)
3.一个节点可拥有任意数量的子
4.同胞是拥有相同父节点的节点
l DOM操作
l 总结
1、DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说,这是表示和处理一个HTML或XML文档的常用方法。 2、Dom技术使得用户页面可以动态地变化,如可以动态地显示或隐藏一个元素,改变它们的属性,增加一个元素等,Dom技术使得页面的交互性大大地增强。
3、DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示,不过页面当然可能并不是以这种树的方式具体实现。