来源：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 方法

方法是我们可以在节点上执行的动作（比如添加或修改元素）。

这里提供一些您将在本教程中学到的常用方法：

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 是只读的。

比较重要的节点类型有：

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）、改变事件（处理程序）