DOM详解

一、简介

DOM即（Document Object Model）：文档对象模型，用来将标记型文档封装成对象，并将标记型文档中的所有内容（标签、文本、属性等）都封装成对象。即标记型文档的一种解析方式。因为封装为对象就可以对其中的属性和行为进行调用，以便于对这些文档及文档中的内容进行更方便的操作。

DOM解析方式：将标记型文档解析为一颗dom树，而树中的内容都封装为节点对象。
按照标签的层次关系体现出标签的所属，形成一个树状结构。所以我们将DOM解析文档形成的document对象称为dom树，而树中的标签以及文本甚至属性称为节点。这个节点也称为对象。标签通常也称为页面中的元素。
注意：这个DOM解析的好处是可以对树中的节点进行任意操作，如增删查改。但也有弊端：这种解析需要将标记型文档加载进内存。意味着如果文档体积很大时较为浪费空间。

二、另一种解析方式：SAX

是由一些组织定义的一种民间常用的解析方式，并不是w3c标准，而DOM是w3c的标准。
SAX的解析方式：基于事件驱动的解析。好处：获取数据的速度快。弊端：不遵从增删查改操作。

三、DOM三种模型

DOM level 1：将html文档封装成对象。
DOM level 2：在level1的基础上加入了新功能，比如解析名称空间。
DOM level 3：将xml文档封装成了对象。

四、DHTML:动态html

不是一门语言，而是多项技术综合体的简称，这些技术包括HTML、CSS、DOM、JavaScript。
四种技术(语言)在动态html中扮演的角色：
HTML:用标签封装数据。即负责提供标签，对数据进行封装，目的是便于对该标签中的数据进行操作。
CSS：对数据样式进行定义。即负责提供样式属性，对标签中的数据进行样式的定义。
DOM：将文档和标签等所有内容进行解析。即负责将标记型文档及文档中的内容进行解析。并封装成对象，在对象中定义了更多的属性和行为，便于对对象进行操作。
JS:对页面行为进行定义（页面动态效果）。即负责提供程序设计语言，对页面中的对象进行逻辑操作。
所以JavaScript是DHTML的主力编程语言。

五、BOM：Browser Object Model（浏览器对象模型）

这个模型方便于操作浏览器。浏览器对应的对象就是Window对象。

六、获取节点对象

DOM将标记型文档封装为了document对象，而文档中的内容封装成了节点对象。常见的节点对象有：标签、属性、文本。
获取节点对象的方法：
方式一：通过id获取：getElementByID();

 1 <script type="text/javascript">
 2 function changeDiv(){
 3 //通过id获取div标签
 4 var divNode = document.getElementById("divId");
 5 //操作该节点,如获取该节点的nodeName、nodeType、nodeValue
 6 
 7 //获取并修改文本数据
 8 divNode.innerHTML = "???????".fontcolor("red");
 9 }
10 </script>
11 <input type="button" value="点击查看效果" onclick="changeDiv()"/>
12 <div id="divId">这是一个div节点</div>

View Code

方式二：通过name属性获取节点(因为name可以相同，所以返回的是一个数组)getElementsByName();

 1 <script type="text/javascript">
 2 function show(){
 3 //通过name获取节点数组
 4 var nodes = document.getElementsByName("haha");
 5 //
 6 var divNode = nodes[0];
 7 var textNode = nodes[1];
 8 
 9 document.write(divNode.innerHTML+"<br/>"+textNode.value);
10 }
11 </script>
12 <input type="button" value="点击查看效果" onclick="show()"/>
13 <div name="haha">这是一个div节点</div>
14 <input type="text" value="请输入任意内容..." name ="haha"/>

View Code

方式三：对所以标签都适用的方法：像<a>这样的标签既没有id，也没有name，就可以直接通过标签名来获取：getElementsByTagName();

 1 <script type="text/javascript">
 2 function show(){
 3 //通过标签名获取节点数组
 4 var nodes = document.getElementsByTagName("a");
 5 //
 6 var node1 = nodes[0];
 7 var node2 = nodes[1];
 8 
 9 document.write(node1.href+"<br/>"+node2.href);
10 }
11 </script>
12 <input type="button" value="获取以下链接地址" onclick="show()"/>
13 <a href="http://www.w3school.com.cn">W3C官网</a>
14 <a href="http://www.cnblogs.com/fzz9/">博客园主页</a>

View Code

七、通过节点层次关系获取节点

节点的层次关系：
1、父节点：parentNode(一个父节点)
2、子节点：childNodes(若干个子节点)
3、兄弟节点：上一个兄弟节点：previousSibling；下一个兄弟节点：nextSibling

八、节点的一般操作

1、创建并添加
2、删除节点
3、替换&克隆节点

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>节点的一般操作</title>
 6 <style type="text/css">
 7     div{
 8         border:#FFFFFF 1px solid;
 9         200px;
10         padding:20px;
11         margin:10px;
12         font-family:"华文中宋";
13         font-size:20px;
14     }
15     #divTitle{
16         border-left-80px;
17         50px;
18         padding:10px;
19         margin:10px;
20         background:#00dd66;
21     }
22     #div1{
23         background:#0066FF;
24     }
25     #div2{
26         background:#6600FF;
27     }
28     #div3{
29         background:#66FF00;
30     }
31     #div4{
32         background:#FF0066;
33     }
34     hr{
35         border:#CCFF00 1px solid;
36     }
37 </style>
38 </head>
39 
40 <body>
41     <script type="text/javascript">
42         //在div3中添加一个文本节点
43         function creNode(){
44             //创建文本节点
45             var newText = document.createTextNode("蜡炬成灰泪始干");
46             //获取div3节点
47             var div3 = document.getElementById("div3");
48             //添加
49             div3.appendChild(newText);
50         }
51         //删除节点
52         function delNode(){
53             var divNode3 = document.getElementById("div3");
54             //方法一：删除节点,参数为true时，连同子节点也一起上删除，此方法在IE中有效 
55            //divNode3.removeNode(true);
56            //方法二：使用父节点删除(推荐)
57            divNode3.parentNode.removeChild(divNode3);
58         }
59         
60         //克隆节点
61         function updateNode(){
62             var div1 = document.getElementById("div1");
63             var div3 = document.getElementById("div3");
64             var copyDiv = div3.cloneNode(true);
65             div1.parentNode.replaceChild(copyDiv,div1);
66         }
67         
68         //添加标题连接
69         function setTitle(){
70             //创建链接元素
71             var title = document.createElement("a");
72             title.href = "http://hanyu.baidu.com/shici/detail?pid=1d4e20feb969440989a03d6e0700f077&from=kg0";
73             title.innerHTML = "无题";
74             title.target = "_blank";
75             //获取divTitle节点
76             var divTitle = document.getElementById("divTitle");
77             //添加
78             divTitle.appendChild(title);
79         }
80     </script>
81     
82     <input type="button" value="创建并添加节点" onclick="creNode()" />
83     <input type="button" value="删除节点" onclick="delNode()" />
84     <input type="button" value="克隆节点" onclick="updateNode()" />
85     <input type="button" value="查看" onclick="setTitle()" />
86     <hr/>
87     <div id="divTitle"></div>
88     <div id="div1">相见时难别亦难</div>
89     <div id="div2">东风无力百花残</div>
90     <div id="div3"></div>
91     <div id="div4">蜡炬成灰泪始干</div>
92 </body>
93 </html>

View Code