DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。
为什么 DOM 必不可少
自从 IE 4.0 和 Netscape Navigator 4.0 开始支持不同形态的动态 HTML（DHTML），开发者首次能够在不重载网页的情况下修改它的外观和内容。这是 Web 技术的一大飞跃，不过也带来了巨大的问题。Netscape 和微软各自开发自己的 DHTML，从而结束了 Web 开发者只编写一个 HTML 页面就可以在所有浏览器中访问的时期。
业界决定必须要做点什么以保持 Web 的跨平台特性，他们担心如果放任 Netscape 和微软公司这样做，Web 必将分化为两个独立的部分，每一部分只适用于特定的浏览器。因此，负责指定 Web 通信标准的团体 W3C（World Wide Web Consortium）就开始制定 DOM。
DOM 的各个 level
DOM Level 1 是 W3C 于 1998 年 10 月提出的。它由两个模块组成，即 DOM Core 和 DOM HTML。前者提供了基于 XML 的文档的结构图，以便访问和操作文档的任意部分；后者添加了一些 HTML 专用的对象和方法，从而扩展了 DOM Core。
注意，DOM 不是 JavaScript 专有的，事实上许多其他语言都实现了它。不过，Web 浏览器中的 DOM 已经用 ECMAScript 实现了，现在是 JavaScript 语言的一个很大组成部分。
DOM Level 1 只是一个目标，即规划文档的结构，DOM Level 2 的目标就广泛多了。对原始 DOM 的扩展添加了对鼠标和用户界面事件（DHTML 对此有丰富的支持）、范围、遍历（重复执行 DOM 文档的方法）的支持，并通过对象接口添加了对 CSS（层叠样式表）的支持。由 Level 1 引入的原始 DOM Core 也加入了对 XML 命名空间的支持。
DOM Level 2 引入了几种 DOM 新模块，用于处理新的接口类型：
· DOM 视图 - 描述跟踪文档的各种视图（即 CSS 样式化之前和 CSS 样式化之后的文档）
· DOM 事件 - 描述事件的接口
· DOM 样式 - 描述处理基于 CSS 样式的接口
· DOM 遍历和范围 - 描述遍历和操作文档树的接口
DOM Level 3 引入了以统一的方式载入和保持文档的方法（包含在新模块 DOM Load and Save）以及验证文档（DOM Validation）的方法，从而进一步扩展了 DOM。在 Level 3 中，DOM Core 被扩展为支持所有的 XML 1.0 特性，包括 XML Infoset、XPath 和 XML Base。
在学习 DOM 时，可能会遇到有人引用 DOM Level 0。注意，根本没有 DOM Level 0 这个标准，它只是 DOM 的一个历史参考点（DOM Level 0 指的是 IE 4.0 和 Netscape Navigator 4.0 中支持的原始 DHTML）。
Dom树:
什么是 DOM？
DOM 是 W3C（万维网联盟）的标准。
DOM 定义了访问 HTML 和 XML 文档的标准：
“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：
· 核心 DOM - 针对任何结构化文档的标准模型
· XML DOM - 针对 XML 文档的标准模型
· HTML DOM - 针对 HTML 文档的标准模型
注：DOM 是 Document Object Model（文档对象模型）的缩写。
l 什么是 XML DOM？
XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。
l 什么是 HTML DOM？
· HTML 的标准对象模型
· HTML 的标准编程接口
· W3C 标准
HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
DOM 节点
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)：
· 整个文档是一个文档节点
· 每个 HTML 元素是元素节点
· HTML 元素内的文本是文本节点
· 每个 HTML 属性是属性节点
· 注释是注释节点
节点父、子和同胞
节点树中的节点彼此拥有层级关系。
父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
· 在节点树中，顶端节点被称为根（root）
· 每个节点都有父节点、除了根（它没有父节点）
· 一个节点可拥有任意数量的子
· 同胞是拥有相同父节点的节点
下面的图片展示了节点树的一部分，以及节点之间的关系：
注意:<title>ITCAST</title>，元素节点 <title>，包含值为 "ITCAST " 的文本节点。使用innerHTML获取.
HTML DOM Event
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。
Event 对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！
HTML DOM 方法
导航属性:
· parentNode - 节点（元素）的父节点
· firstChild – 节点下第一个子元素
· lastChild – 节点下最后一个子元素
· childNodes - 节点（元素）的子节点
节点属性:
· attributes - 节点（元素）的属性节点
· nodeType – 节点类型
· nodeValue – 节点值
· nodeName – 节点名称
· innerHTML - 节点（元素）的文本值
访问 HTML 元素（节点）
访问 HTML 元素等同于访问节点
您能够以不同的方式来访问 HTML 元素：
· 通过使用 getElementById() 方法
· 通过使用 getElementsByTagName() 方法
· 通过使用 getElementsByClassName() 方法
导航节点关系
您能够使用以下节点属性：
l parentNode
l firstChild
l lastChild
l childNodes
在文档结构中进行导航。
HTML DOM 属性
l innerHTML属性:获取元素内容
l nodeName属性:获取节点的名称。
l nodeValue属性:获取节点的值。
l nodeType属性:获取节点的类型,返回值是数字(配图)
增删改查演示
访问 HTML 元素（节点）
· 通过使用 getElementById() 方法
· 通过使用 getElementsByTagName() 方法
· 通过使用 getElementsByClassName() 方法
· 通过使用getElementsByName()方法
7.7.2 HTML 元素的增删改查
增:
1. createElement(name)创建元素
2. appendChild();将元素添加
删:
1. 获得要删除的元素
2. 获得它的父元素
3. 使用removeChild()方法删除
改:
第一种方式:
1. 使用上面增和删结合完成修改
第二中方式:
使用setAttribute();方法修改属性
使用innerHTML属性修改元素的内容
查:
使用之前介绍的方法.
修改 HTML DOM 包括以下的方面：
· 改变 HTML 内容
改变元素内容的最简答的方法是使用 innerHTML 属性。
· 改变 CSS 样式
|
<p id="p2">Hello world!</p> document.getElementById("p2").style.color="blue"; |
· 改变 HTML 属性
elementNode.setAttribute(name,value)
· 创建新的 HTML 元素
createElement(name)
· 删除已有的 HTML 元素
elementNode.removeChild(node)
· 改变事件（处理程序）