说明：
本文的主线和大部分内容均来自：
http://www.blogjava.net/amigoxie/archive/2011/10/31/362367.html，原文写的很不错，本文只是在我看了原文后加了一些自己的理解。
其余参考内容来自：
http://www.w3school.com.cn/htmldom/index.asp
http://www.cnblogs.com/x116/articles/1083915.html
1.什么是DOM?
DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法,我们经常用它来处理HTML。
2.为什么使用DOM?
DOM技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，Dom技术使得页面的交互性大大地增强。
3.该如何使用DOM?
3.1查找并访问节点
你可通过若干种方法来查找您希望操作的元素：
1）通过使用 getElementById() 和 getElementsByTagName() 方法，这两个方法能够得到html中任何的元素。
- getElementById()方法返回的是指定id的元素，如何操作该元素？这时候我们通过查询文档来了解返回的是什么元素有什么属性供我们设置，例如下例中 alert(document.getElementById('umlId').innerHTML); 返回的是一个HTML DOM TableRow 对象，我们调用该对象的innerHTML属性获取了该对象标签之间的值。更多信息请查阅文档：http://www.w3school.com.cn/htmldom/index.asp.
-
getElementsByTagName()传入的是你需要访问的标签的名字（例如：p,tr,a等），返回的结果是这个html中所有符合你传入标签的元素数组（例如返回该html中所有的p元素），例如下例子中笔者获取到该html中所有的tr元素和td元素。因为是数组所有我们一般使用下标号对元素进行访问，例如：tdVar[0]，返回的元素可以进行哪些操作？还是需要查询文档，查看你设置的元素的属性和方法。
2）通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性 ，这几个方法一般是访问指定元素的子元素。（此方法值针对IE浏览器）
这三个属性 parentNode、firstChild 以及 lastChild 遵循HTML的文档的结构（没看懂？请学习http://www.w3school.com.cn/htmldom/dom_nodes.asp）。所以下例子中 alert(tdVar[0].parentNode); 表达的意思是打印第一个td元素的父元素，所以应该是个tr对象。
typeof 是ECMAScript的运算符，用来检查该元素的类型
代码中document.getElementById("tr2").style.display ="none";我们获取到id为tr2的元素，调用它的Style对象，并将该对象的display属性设置为none。
文档中的描述Style 对象代表一个单独的样式声明，可从应用样式的文档或元素访问 Style 对象。你可以简单理解为任何一个元素都有一个Style对象，我们通过设置该对象的一些属性能够改变该元素的外观。
1 <html>
2 <head>
3 <title>DOM测试</title>
4 </head>
5 <body id="body">
6
7 <input type="text" id="textId" value="DOM"/>
8
9 <table border="1px">
10 <tr>
11 <td>java</td>
12 <td>lee</td>
13 <td id="umlId">uml</td>
14 </tr>
15 <tr id="tr2">
16 <td>andorid</td>
17 <td>wang</td>
18 <td>xml</td>
19 </tr>
20 </table>
21
22
23 <script type="text/javascript">
24
25
26 alert(document.getElementById('umlId').innerHTML);
27 alert(document.getElementById('textId').value);
28
29
30 var tdVar = document.getElementsByTagName('td');
31 var trVar = document.getElementsByTagName('tr');
32
33 //打印第一个td标签元素,FF和IE的差异
34 alert(tdVar[0]);
35
36 //打印第一个td标签元素的父元素
37 alert(tdVar[0].parentNode);
38
39 //打印第一个tr标签元素的第一个子元素和最后一个子元素，只能在IE下显示
40 alert(trVar[0].firstChild.innerHTML);
41 alert(trVar[0].lastChild.innerHTML);
42
43
44
45
46 //打印第一个td标签中包含的内容
47 alert(tdVar[0].innerHTML);
48
49 //查看tr2元素的类型
50 alert(typeof document.getElementById("tr2"));
51
52 //将名称为tr2的元素的style对象的display属性设置为none
53 document.getElementById("tr2").style.display ="none";
54 document.getElementById("body").style.display ="none";
55
56
57 </script>
58
59 </body>
60 </html>
代码结果：
1）IE下结果：
uml
DOM
[object]
[object]
java
uml
java
object
效果：表格的第二列消失
2）FF下结果：
uml
DOM
[object HTMLTableCellElement]
[object HTMLTableRowElement]
undefined
undefined
java
object
效果：表格的第二列消失
3.2DOM的重要属性
1)childNodes属性：该属性让开发人员可以将给定节点树里把任何一个元素的所有节点检索出来。它返回一个数组，这个数组包含给点元素节点的所有子元素。IE会忽略节点之间生成的空白文本节点（比如换行字符），而 Mozilla、FireFo浏览器不这么做。我们一起来看一个例子：
1 <html>
2 <head>
3 <title>DOM测试2</title>
4 </head>
5 <body id="body">
6 <input type="text" id="textId" value="DOM"/>
7 <table border="1px">
8 <tr>
9 <td>java</td>
10 <td>lee</td>
11 <td id="umlId">uml</td>
12 </tr>
13 <tr id="tr2">
14 <td>andorid</td>
15 <td>wang</td>
16 <td>xml</td>
17 </tr>
18 </table>
19 <script type="text/javascript">
20
21 var trChild = document.getElementsByTagName('tr')[0].childNodes;
22
23 alert(trChild.length);
24
25 //FF:7 IE:3
26 for(var i=0;i<trChild.length;i++){
27 alert(trChild[i]);
28 //alert(trChild[i].nodeType);
29 }
30
31 </script>
32
33 </body>
34 </html>
IE:
3
[object]
[object]
[object]
FF：
7
[object Text]
[object HTMLTableCellElement]
[object Text]
[object HTMLTableCellElement]
[object Text]
[object HTMLTableCellElement]
[object Text]
IE的结果我们很好理解，可是FF中多出的几个对象是什么东西呢？希望大家看了下面这张图就会有所了解，我们发现多出来的不过是一些换行符。所以大家在使用此属性的时候要注意浏览器的兼容问题。
2）nodeType属性返回的是指定元素的所有子节点的类型，他的返回值也是一个数组，通常这些类型为下表所示，我们只关心前三种类型。
| NodeType | Named Constant |
|---|
| 1 | ELEMENT_NODE（元素节点） |
| 2 | ATTRIBUTE_NODE（属性节点） |
| 3 | TEXT_NODE（文本节点） |
| 4 | CDATA_SECTION_NODE |
| 5 | ENTITY_REFERENCE_NODE |
| 6 | ENTITY_NODE |
| 7 | PROCESSING_INSTRUCTION_NODE |
| 8 | COMMENT_NODE |
| 9 | DOCUMENT_NODE |
| 10 | DOCUMENT_TYPE_NODE |
| 11 | DOCUMENT_FRAGMENT_NODE |
| 12 | NOTATION_NODE |
所以将上例中注释部分去掉，FF的结果为3131313 IE的结果为111，请读者自己考虑原因。如果问这个属性有什么用，我们可以针对某某种类型的子节点进行编程，例如：我想把所有类型为3的子节点字体加粗。
3）nodeValue属性返回的是该节点的值，由于节点类型的不同，他们取得的值一般为：
| 元素节点 | null |
| 文本节点 | 文本本身 |
| 属性节点 | 属性的值 |
所以上例中FF下各个子节点中的值应该为：换行符 null 换行符 null 换行符 null 换行符 。IE为：null null null。
4）nodeName属性返回的是该节点的名称，并且该属性是只读的。
| 元素节点 | 大写标签名 |
| 属性节点 | 属性名称 |
| 文本节点 | #text |
| 文档节点 | #document |
所以上例中FF下各个子节点中的值应该为：#text TD #text TD #text TD #text 。IE为：TD TD TD。
3.3DOM的重要方法
1） createElement()方法：创建元素
定义和用法
createElement() 方法可创建元素节点。
此方法可返回一个 Element 对象。
语法：
createElement(name)
