来源：HTML DOM 教程
0、什么是 HTML DOM？
HTML DOM 是HTML Document Object Model(文档对象模型)的缩写，它将网页中的各个元素都看作一个个对象，从而使网页中的元素也可以被计算机语言获取或者编辑，也就是：
- HTML 的标准对象模型
- HTML 的标准编程接口（所有HTML元素被定义为对象，而编程接口则是对象方法和对象属性）
- W3C 标准
HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
1、DOM 节点
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
- 整个文档是一个 文档节点
- 每个 HTML 元素是 元素节点
- HTML 元素内的文本是 文本节点
- 每个 HTML 属性是 属性节点
- 注释是 注释节点
2、HTML DOM 方法
方法是我们可以在节点上执行的动作（比如添加或修改元素）。
这里提供一些您将在本教程中学到的常用方法：
| 方法 | 描述 |
|---|---|
| getElementById() | 返回带有指定 ID 的元素。 |
| getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 |
| getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。 |
| appendChild() | 把新的子节点添加到指定节点。 |
| removeChild() | 删除子节点。 |
| replaceChild() | 替换子节点。 |
| insertBefore() | 在指定的子节点前面插入新的子节点。 |
| createAttribute() | 创建属性节点。 |
| createElement() | 创建元素节点。 |
| createTextNode() | 创建文本节点。 |
| getAttribute() | 返回指定的属性值。 |
| setAttribute() | 把指定属性设置或修改为指定的值。 |
3、HTML DOM 属性
属性是节点能够被获取或设置的值（比如节点的名称或内容）。
3、1 innerHTML 属性
用来获取或设置位于对象起始和结束标签内的HTML。
有两种写法:（1）document.getElementById(id).innerHTML=.......(2)id.innerHTML=.......
3、2 nodeName 属性
nodeName 属性规定节点的名称。
- nodeName 是只读的
- 元素节点的 nodeName 与 标签名相同
- 属性节点的 nodeName 与 属性名相同
- 文本节点的 nodeName 始终是 #text
- 文档节点的 nodeName 始终是 #document
3、3 nodeValue 属性
nodeValue 属性规定节点的值。
- 元素节点的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本本身
- 属性节点的 nodeValue 是属性值
3、4 nodeType 属性
nodeType 属性返回节点的类型。nodeType 是只读的。
比较重要的节点类型有：
| 元素类型 | NodeType |
|---|---|
| 元素 | 1 |
| 属性 | 2 |
| 文本 | 3 |
| 注释 | 8 |
| 文档 | 9 |
4、HTML DOM 访问
访问 HTML 元素等同于访问节点，有以下几种方式：
- 通过使用 getElementById() 方法
- 通过使用 getElementsByTagName() 方法，如document.getElementsByTagName("p");
- 通过使用 getElementsByClassName() 方法，如document.getElementsByClassName("intro");（其中class="intro"，在IE5，6，7，8中无效）
5、HTML DOM - 修改
修改 HTML = 改变元素、属性、样式和事件。主要有以下几个不同的方面：
（1）、改变 HTML 内容——innerHTML（元素节点） 属性或 nodeValue （有内容的文本节点才能使用）属性
（2）、改变 CSS 样式——如document.getElementById("p2").style.color="blue";
（3）、改变 HTML 属性——如document.getElementById("image").src（属性名）="landscape.jpg";
（4）、创建新的 HTML 元素
首先创建该元素（元素节点），然后把它追加到已有的元素上，有以下三种方法：
（5）、删除已有的 HTML 元素
使用removeChild（）方法
<div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script>
（1）引用父元素 var parent=document.getElementById("div1"); //查找要删除元素的父元素 var child=document.getElementById("p1"); //查找要删除的元素 parent.removeChild(child); //从父元素中删除子元素
（2）不引用父元素
var child=document.getElementById("p1"); //查找需要删除的元素 child.parentNode.removeChild(child); //使用parentNode属性来查找父元素从而删除元素
</script>
（6）替换HTML元素
使用 replaceChild() 方法。
如 parent.replaceChild(para,child); 将child替换成para元素
（6）、改变事件（处理程序）