标签：详解 cti 封装数据 alt lap any style 无题 new
DOM即（Document Object Model）：文档对象模型，用来将标记型文档封装成对象，并将标记型文档中的所有内容（标签、文本、属性等）都封装成对象。即标记型文档的一种解析方式。因为封装为对象就可以对其中的属性和行为进行调用，以便于对这些文档及文档中的内容进行更方便的操作。
DOM解析方式：将标记型文档解析为一颗dom树，而树中的内容都封装为节点对象。
按照标签的层次关系体现出标签的所属，形成一个树状结构。所以我们将DOM解析文档形成的document对象称为dom树，而树中的标签以及文本甚至属性称为节点。这个节点也称为对象。标签通常也称为页面中的元素。
注意：这个DOM解析的好处是可以对树中的节点进行任意操作，如增删查改。但也有弊端：这种解析需要将标记型文档加载进内存。意味着如果文档体积很大时较为浪费空间。
是由一些组织定义的一种民间常用的解析方式，并不是w3c标准，而DOM是w3c的标准。
SAX的解析方式：基于事件驱动的解析。好处：获取数据的速度快。弊端：不遵从增删查改操作。
DOM level 1：将html文档封装成对象。
DOM level 2：在level1的基础上加入了新功能，比如解析名称空间。
DOM level 3：将xml文档封装成了对象。
不是一门语言，而是多项技术综合体的简称，这些技术包括HTML、CSS、DOM、JavaScript。
四种技术(语言)在动态html中扮演的角色：
HTML:用标签封装数据。即负责提供标签，对数据进行封装，目的是便于对该标签中的数据进行操作。
CSS：对数据样式进行定义。即负责提供样式属性，对标签中的数据进行样式的定义。
DOM：将文档和标签等所有内容进行解析。即负责将标记型文档及文档中的内容进行解析。并封装成对象，在对象中定义了更多的属性和行为，便于对对象进行操作。
JS:对页面行为进行定义（页面动态效果）。即负责提供程序设计语言，对页面中的对象进行逻辑操作。
所以JavaScript是DHTML的主力编程语言。
这个模型方便于操作浏览器。浏览器对应的对象就是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>
方式二：通过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"/>
方式三：对所以标签都适用的方法：像<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>
节点的层次关系：
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 width:200px; 10 padding:20px; 11 margin:10px; 12 font-family:"华文中宋"; 13 font-size:20px; 14 } 15 #divTitle{ 16 border-left-width:80px; 17 width: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>
标签：详解 cti 封装数据 alt lap any style 无题 new
原文地址：http://www.cnblogs.com/fzz9/p/7772149.html
