说明：
本文的主线和大部分内容均来自：
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)
| 参数 | 描述 |
|---|---|
| name | 字符串值，这个字符串可为此元素节点规定名称。 |
返回值
新创建的 Element 节点，具有指定的标签名。
抛出
如果 name 参数中含有不合法的字符，该方法将抛出代码为 INVALID_CHARACTER_ERR 的 DOMException 异常。
2）appendChild()方法：追加子节点
appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
此方法可返回这个新的子节点。
语法：
appendChild(newchild)
| 参数 | 描述 |
|---|---|
| newchild | 所添加的节点 |
返回值
加入的节点。
描述
该方法将把节点 newchild 添加到文档中，使它成为当前节点的最后一个子节点。
如果文档树中已经存在了 newchild，它将从文档树中删除，然后重新插入它的新位置。如果 newchild 是 DocumentFragment 节点，则不会直接插入它，而是把它的子节点按序插入当前节点的 childNodes[] 数组的末尾。
注意，来自一个文档的节点（或由一个文档创建的节点）不能插入另一个文档。也就是说，newchild 的 ownerDocument 属性必须与当前节点的 ownerDocument 属性相同。
3）createTextNode()方法：创建文本节点
createTextNode() 可创建文本节点。
此方法可返回 Text 对象。
语法：
createTextNode(data)
| 参数 | 描述 |
|---|---|
| data | 字符串值，可规定此节点的文本。 |
返回值
返回新创建的 Text 节点，表示指定的 data 字符串。
4）insertBefore()方法：添加新节点到现有元素前
insertBefore() 方法在已有的子节点之前插入一个新的子节点。
该方法返回这个新的子节点。
语法：
elementNode.insertBefore(new_node,existing_node)
| 参数 | 描述 |
|---|---|
| new_node | 必需。要插入的节点。 |
| existing_node | 必需。已有节点。在此节点之前插入新节点。 |
提示和注释：
注释：Internet Explorer 会忽略节点之间生成的空白文本节点（比如换行字符），而 Mozilla 不这么做。因此，在下面的例子中，我们使用一个函数来检查最后一个子节点的节点类型。
元素节点的节点类型是 1，因此如果最后一个子节点不是元素节点，则移动到上一个节点，并检查这个节点是否是元素节点。这个过程一直会持续到找到最后一个属于元素节点的子节点为止。通过这个方法，在 Internet Explorer 和 Mozilla 中都会得到正确的结果。
通过上述的几个方法说明，相信下面的代码不难理解。
1 <html>
2 <head>
3 <title>DOM测试3</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
13
14 </tr>
15 <tr id="tr2">
16 <td>andorid</td>
17 <td>wang</td>
18 <td>xml</td>
19 </tr>
20 </table>
21
22 <div id="div"></div>
23
24 <script type="text/javascript">
25
26 //获取body元素
27 var divElement = document.getElementById("div");
28
29 //创建a元素
30 var aElement = document.createElement("a");
31
32 aElement.href ="www.baidu.com";
33
34 //打印节点类型
35 alert(aElement.nodeName);
36
37 var aText = document.createTextNode("点我");
38
39 aElement.appendChild(aText);
40
41
42 //追加子节点到div元素下
43 divElement.appendChild(aElement);
44
45 //打印div第一个子节点的节点名称
46 alert('第一个元素的名称为：'+ divElement.firstChild.nodeName);
47
48 //创建一个文本元素
49 var textElement = document.createTextNode("hello world!");
50
51 //将它添加到div元素下
52 divElement.appendChild(textElement);
53
54 //打印出div元素的最后一个节点的名称
55 alert('最后一个元素的名称为：'+divElement.lastChild.nodeName);
56
57 var textElement2 = document.createTextNode("bye world!");
58
59 //在a元素前增加一个元素，此时这个文本元素就成为div子节点中的第一个元素
60 divElement.insertBefore(textElement2,aElement);
61 alert('第一个元素的名称为：'+divElement.firstChild.nodeName);
62
63
64 //document.write("<p>回家吃饭</p>");
65
66 //divElement.innerHTML = "<p>innerHTML</p>";
67
68 </script>
69
70 </body>
71 </html>
IE:
A
第一个元素的名称为：A
最后一个元素的名称为：#text
第一个元素的名称为：#text
FF:
A
第一个元素的名称为：A
最后一个元素的名称为：#text
第一个元素的名称为：#text
*不同浏览器中DOM解析的差异：http://www.w3school.com.cn/xmldom/dom_mozilla_vs_ie.asp
4.JQUERY与DOM
http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp
576
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
