JavaScript--XML DOM

DOM （Document Object Model）文档对象模型
1. document 文档 HTML XML 文件（标记语言)
<body>
　　<div>
　　　　
　　　　<a href="#">wwww</a>
　　</div>
</body>
节点：将文档想成一个倒树，每一个部分（根、元素、文本（内容），属性，注释）都是一节点。
根据 DOM，HTML 文档中的每个成分都是一个节点。

DOM 是这样规定的：
　　1) 整个文档是一个文档节点(根节点)
　　2) 每个 HTML 标签是一个元素节点
　　3) 包含在 HTML 元素中的文本是文本节点
　　4) 每一个 HTML 属性是一个属性节点
　　5) 注释属于注释节点

2. 父、子和同级节点
节点树中的节点彼此之间都有等级关系。

父、子和同级节点用于描述这种关系。父节点拥有子节点，位于相同层级上的子节点称为同级节点（兄弟或姐妹）。
　　1) 在节点树中，顶端的节点成为根节点
　　2) 根节点之外的每个节点都有一个父节点
　　3) 节点可以有任何数量的子节点
　　4) 叶子是没有子节点的节点
　　5) 同级节点是拥有相同父节点的节点

只要知道一个节点，按关系找到其它节点
父节点： parentNode
子节点（第一个，最后一个） childNodes firstChild lastChild
同胞（同辈）节点（上一个，下一个）nextSibling previousSibling

3. 获取节点的方式：
　　array getElementsByTagName("节点名"); //获取所对应节点名（所有），返回的是数组
　　object getElementById("id名"); //获取id名的唯一节点对象

　　示例：(找节点)
　　　　document.getElementsByTagName("li"); //所有所有li节点
　　　　document.getElementById("lid"); //获取id值为lid的唯一节点
　　　　document.getElementById("uid").getElementsByTagName("li");
　　　　//获取id值为uid中所有li子节点
　　　　document.getElementsByTagName("ul")[0].getElementsByTagName("li");
　　　　//获取第一个ul节点中所有li子节点

　　获取到的标记名(多个)、 id（唯一）、 name（多个）

4. 每个节点中的内容
　　节点类型nodeType、节点名nodeName，节点值nodeValue

　　节点名nodeName：
　　　　nodeName 是只读的
　　　　元素节点的 nodeName 与标签名相同
　　　　属性节点的 nodeName 是属性的名称
　　　　文本节点的 nodeName 永远是 #text
　　　　文档节点的 nodeName 永远是 #document

　　节点值nodeValue
　　　　元素节点的 nodeValue 是 undefined
　　　　文本节点的 nodeValue 是文本自身
　　　　属性节点的 nodeValue 是属性的值

　　nodeType（节点类型）
　　　　元素类型节点类型
　　　　　元素　　 1
　　　　　属性　 2
　　　　　文本　　 3
　　　　　注释　　 8
　　　　　文档　　 9

4. Object 对象（HTML元素转成的对象(js对象)）
　　注意：如果使用js操作HTML文档，就需要选将HTML文档结构转成Js对象
　　a. 操作属性:
　　　　nodeName（节点名称）
　　　　nodeValue（节点值）
　　　　nodeType（节点类型）
　　　　其他属性：（针对于节点）
　　　　childNodes 返回节点到子节点的节点列表。
　　　　firstChild 返回节点的首个子节点。
　　　　lastChild 返回节点的最后一个子节点。
　　　　nextSibling 返回节点之后紧跟的同级节点。
　　　　previousSibling 属性可返回某节点之前紧跟的节点（处于同一树层级）
　　　　parentNode 返回节点的父节点。
　　　　textContent设置或返回节点及其后代的文本内容。

　　b. 操作内容
　　　　innerText(IE) textContent(FF) //获取的是显示的内容，不包含HTML标签
　　　　innerHTML //获取的是显示的内容，会包含HTML
　　　　outerText
　　　　outerHTML
　　　　表单
　　　　value
　　c. 操作样式
　　　　aobj.style.backgroundColor="red";
　　　　aobj.style.fontSize="3cm";
　　　　className
　　　　aobj.className="test";
　　　　aobj.className+=" demo";
　　　　aobj.className="";
　　e. 操作节点：
　　　　appendChild() 向节点的子节点列表的结尾添加新的子节点。
　　　　cloneNode() 复制节点。
　　　　removeChild() 删除（并返回）当前节点的指定子节点。
　　　　replaceChild() 用新节点替换一个子节点。
　　　　hasAttributes() 判断当前节点是否拥有属性。
　　　　hasChildNodes() 判断当前节点是否拥有子节点。
　　　　insertBefore() 在指定的子节点前插入新的子节点。

　　f. 创建节点：
　　　　createElement() 创建元素节点
　　　　createAttribute() 来创建属性节点可以：元素节点.属性名=值；
　　　　createTextNode() 来创建新的文本节点可以：元素节点.innerHTML=文本内容；

　　有了以上三点的操作之前先转成对象
　　　　转成对象的两种形式：
　　　　1. 标记名(多个)、 id（唯一）、 name（多个）
　　　　　　document中的三个方法
　　　　　　　　var objs=document.getElementsByTagName("div"); //获取多个
　　　　　　　　var objs=document.getElementById("one"); //获取一个
　　　　　　　　var objs=document.getElementsByName("two");

实例1：读取本地XML文件

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8"/>
 5         <title>XML-DOM</title>
 6     </head>
 7     <body>
 8         <h3>XML-DOM</h3>
 9         <script type="text/javascript">
10             //加载解析stu.xml文件信息--谷歌浏览器不支持
11             try{ //Internet Explorer
12                 xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
13             }catch(e){
14                 try{ //Firefox, Mozilla, Opera, etc.
15                     xmlDoc=document.implementation.createDocument("","",null);
16                 }catch(e){
17                     alert(e.message);
18                 }
19             }
20             
21             try{
22                 xmlDoc.async=false;
23                 xmlDoc.load("stu.xml");
24                 //document.write("xmlDoc is loaded, ready for use");
25                 var list = xmlDoc.getElementsByTagName("stu");
26                 for(var i=0;i<list.length;i++){
27                     document.write(list[i].getElementsByTagName("name")[0].childNodes[0].nodeValue
28                     +"<br/>");
29                 }
30             }catch(e){
31                 alert(e.message);
32             }
33 
34         </script>
35     </body>
36 </html>

View Code

实例2：节点遍历

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8"/>
 5         <title>XML-DOM</title>
 6     </head>
 7     <body>
 8         <h3>XML-DOM：节点的遍历</h3>
 9         <ul id="uid">
10             <li>成龙</li>
11             <li>甄子丹</li>
12             <li>李连杰</li>
13             <li>宋小宝</li>
14         </ul>
15         <script type="text/javascript">
16             //获取ul中的所有li节点
17             var list = document.getElementById("uid").getElementsByTagName("li");
18             document.write(list.length+"<br/>");
19             
20             //通过属性获取ul的所有子节点
21             var list2 = document.getElementById("uid").childNodes;
22             document.write(list2.length+"<br/>");
23             document.write("<hr/>");
24             
25             //遍历所有list2节点
26             for(var i=0;i<list2.length;i++){
27                 //document.write(list2[i].nodeType);
28                 //判断是否是元素节点
29                 if(list2[i].nodeType==1){
30                     document.write(list2[i].firstChild.nodeValue+"<br/>");
31                 }
32             }
33         </script>
34     </body>
35 </html>

View Code

实例3：节点删除

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8"/>
 5         <title>XML-DOM</title>
 6         <style>
 7             ul{list-style:none;}
 8             ul li{line-height:30px;background-color:#ddd;margin-top:2px;}
 9             ul li:hover{background-color:#fc0;}
10             ul li.cc{background-color:#f0c;}
11         </style>
12     </head>
13     <body>
14         <h3>XML-DOM：节点的删除</h3>
15         <ul id="uid">
16             <li>成龙</li>
17             <li>甄子丹</li>
18             <li>李连杰</li>
19             <li>宋小宝</li>
20             <li>成龙</li>
21             <li>甄子丹</li>
22             <li>李连杰</li>
23             <li>宋小宝</li>
24         </ul>
25         <button onclick="doDel()">删除</button>
26         <script type="text/javascript">
27            //获取上面所有的li节点并添加点击事件
28            var list = document.getElementsByTagName("li");
29            for(var i=0;i<list.length;i++){
30               list[i].onclick = function(){
31                 this.setAttribute("class","cc");
32               }
33            }
34            
35            function doDel(){
36               //获取所有li节点
37               var list = document.getElementsByTagName("li");
38               for(var i=0;i<list.length;i++){
39                   //判断是否选中
40                  if(list[i].getAttribute("class")=="cc"){
41                     //执行删除
42                     list[i].parentNode.removeChild(list[i]);
43                     i--;
44                  }
45               }
46            }
47         </script>
48     </body>
49 </html>

View Code

实例4：改变节点属性

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8"/>
 5         <title>XML-DOM</title>
 6         
 7     </head>
 8     <body>
 9         <h3>XML-DOM：改变节点的属性</h3>
10         <a id="aid" href="http://www.baidu.com">百度</a>
11         <script type="text/javascript">
12            //获取上面超级链接节点
13            var a = document.getElementById("aid");
14            a.title = "百度网址"; //HTML DOM属性操作
15            //a.bb = "cc"; //以HTML DOM为节点添加不存在的属性是不可以的。
16            a.setAttribute("bb","cc"); //可通过XML DOM的属性操作
17            alert(a.href+":"+a.getAttribute('title'));
18         </script>
19     </body>
20 </html>

View Code

实例5：节点创建

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8"/>
 5         <title>XML-DOM</title>
 6         <style>
 7             ul{list-style:none;}
 8             ul li{line-height:30px;background-color:#ddd;margin-top:2px;100px;}
 9         </style>
10     </head>
11     <body>
12         <h3>XML-DOM：节点的创建</h3>
13         <ul id="uid">
14             <li>成龙</li>
15             <li>甄子丹</li>
16             <li>李连杰</li>
17             <li>宋小宝</li>
18         </ul>
19         名称：<input id="nid" type="text" size="10" name="name"/>
20         <button onclick="doAdd()">添加</button>
21         <script type="text/javascript">
22            function doAdd(){
23                //获取输入框中的值
24                var name = document.getElementById("nid").value;
25                //获取节点ul
26                var ul = document.getElementById("uid");
27                //创建一个文本节点
28                var tt = document.createTextNode(name);
29                //创建一个li的元素节点
30                var li = document.createElement("li");
31                //添加
32                li.appendChild(tt); //将文本添加li中
33                //ul.appendChild(li); //将li添加的ul中末尾
34                ul.insertBefore(li,ul.firstChild); //将li插入的ul中首位
35            }
36         </script>
37     </body>
38 </html>

View Code

实例6：节点克隆

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8"/>
 5         <title>XML-DOM</title>
 6         <style>
 7             #did{400px;height:300px;border:1px solid blue;}
 8             img{80px;border:2px solid #fff;margin:2px;}
 9             img:hover{border:2px solid red;}
10         </style>
11     </head>
12     <body>
13         <h3>XML-DOM：节点的克隆</h3>
14         <div id="did"></div>
15         <div id="mid">
16             <img src="./images/11.jpg"/>
17             <img src="./images/22.jpg"/>
18             <img src="./images/33.jpg"/>
19             <img src="./images/44.jpg"/>
20         </div>
21         <h4>双击图片可实现图片的添加</h4>
22         <script type="text/javascript">
23            //获取所有图片
24            var list = document.getElementsByTagName("img");
25            //遍历并添加双击事件
26            for(var i=0;i<list.length;i++){
27                 list[i].ondblclick = function(){
28                     //获取div
29                     var did  = document.getElementById("did");
30                     //将当前被双击的图片克隆一份添加到did中
31                     did.appendChild(this.cloneNode());
32                 }
33            }
34         </script>
35     </body>
36 </html>

View Code

实例7：节点替换

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8"/>
 5         <title>XML-DOM</title>
 6         <style>
 7             #did{400px;border:1px solid blue;}
 8             #did img{400px;}
 9             #mid img{80px;border:2px solid #fff;margin:2px;}
10             #mid img:hover{border:2px solid red;}
11         </style>
12     </head>
13     <body>
14         <h3>XML-DOM：节点的替换</h3>
15         <div id="did"><img src="./images/11.jpg"/></div>
16         <div id="mid">
17             <img src="./images/11.jpg"/>
18             <img src="./images/22.jpg"/>
19             <img src="./images/33.jpg"/>
20             <img src="./images/44.jpg"/>
21         </div>
22         <h4>双击图片可实现图片的替换</h4>
23         <script type="text/javascript">
24            //获取所有图片
25            var list = document.getElementsByTagName("img");
26            //遍历并添加双击事件
27            for(var i=0;i<list.length;i++){
28                 list[i].ondblclick = function(){
29                     //获取div
30                     var did  = document.getElementById("did");
31                     //将当前被双击的图片克隆一份替换到did中
32                     did.replaceChild(this.cloneNode(),did.firstChild);
33                 }
34            }
35         </script>
36     </body>
37 </html>

View Code

实例8：XMLDMO操作select

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8"/>
 5         <title>XML DOM实例</title>
 6         <style>
 7             select{100px;height:200px;border:1px solid #ddd;float:left;}
 8             div{100px;height:200px;float:left;text-align:center;padding-top:50px;}
 9         </style>
10     </head>
11     <body>
12         <!-- 注释 -->
13         <h2>XML DOM中的Select对象操作实现</h2>
14         <select id="sid1" size="10" multiple>
15             <option value="0">邓丽君</option>
16             <option value="1">张国荣</option>
17             <option value="2">梅艳芳</option>
18             <option value="3">黄家驹</option>
19             <option value="4">迈克尔.杰克逊</option>
20             <option value="5">姚贝娜</option>
21             <option value="6">张雨生</option>
22         </select>
23         <div>
24             <button onclick="doMove('sid1','sid2')">>></button>
25             <br/><br/><br/><br/>
26             <button onclick="doMove('sid2','sid1')"><<</button>
27         </div>
28         <select id="sid2" size="10" multiple></select>
29         <script type="text/javascript">
30             //执行下拉项的移动操作
31             function doMove(d1,d2){
32                //获取对应的下拉框
33                var select1 = document.getElementById(d1);
34                var select2 = document.getElementById(d2);
35                //获取第一个下拉框中的所有下拉项option
36                var list = select1.getElementsByTagName("option");
37                //遍历判断是否选中
38                for(var i=0;i<list.length;i++){
39                    if(list[i].selected){
40                         list[i].selected = false;
41                         select2.appendChild(list[i]);
42                         i--;
43                    }
44                }
45               
46             }
47             
48             
49         </script>
50         
51     </body>
52 </html>

View Code

实例9：XMLDMO操作table

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8"/>
  5         <title>XML DOM实例</title>
  6         <style>
  7             select,option,div,button{margin:0px;padding:0px;}
  8             #lid,#rid,div{
  9                 80px;
 10                 height:260px;
 11                 float:left;
 12             }
 13             div{
 14                 text-align:center;
 15                 padding-top:60px;
 16             }
 17         </style>
 18     </head>
 19     <body>
 20         <!-- html注释 -->
 21         <h2>XML DOM实例:XML DOM 中table</h2>
 22         <table id="tid" width="500" border="1">
 23             <thead>
 24                 <tr>
 25                     <th>学号</th>
 26                     <th>姓名</th>
 27                     <th>性别</th>
 28                     <th>年龄</th>
 29                     <th>操作</th>
 30                 </tr>
 31             </thead>
 32             <tbody>
 33                 <tr>
 34                     <td>1001</td>
 35                     <td>张三</td>
 36                     <td>男</td>
 37                     <td>20</td>
 38                     <td><button onclick="dodel(this)">删除</button></td>
 39                 </tr>
 40                 <tr>
 41                     <td>1002</td>
 42                     <td>李四</td>
 43                     <td>女</td>
 44                     <td>21</td>
 45                     <td><button onclick="dodel(this)">删除</button></td>
 46                 </tr>
 47                 <tr>
 48                     <td>1003</td>
 49                     <td>王五</td>
 50                     <td>男</td>
 51                     <td>22</td>
 52                     <td><button onclick="dodel(this)">删除</button></td>
 53                 </tr>
 54             </tbody>
 55         </table>
 56         <br/><br/><br/>
 57         <h2>添加学生信息</h2>
 58         <form action="#" name="myform" onsubmit="return doAdd()">
 59             学号：<input type="text" name="sno"/><br/><br/>
 60             姓名：<input type="text" name="name"/><br/><br/>
 61             性别：<input type="text" name="sex"/><br/><br/>
 62             年龄：<input type="text" name="age"/><br/><br/>
 63             <input type="submit" value="添加"/>
 64         </form>
 65         <script type="text/javascript">
 66             //执行删除的方法
 67             function dodel(bt){
 68                 //获取表格节点
 69                 bt.parentNode.parentNode.parentNode.removeChild(bt.parentNode.parentNode);
 70             }
 71             
 72             //执行添加
 73             function doAdd(){
 74                 //获取表单信息
 75                 var data = new Array();
 76                 data[0] = document.myform.sno.value;
 77                 data[1] = document.myform.name.value;
 78                 data[2] = document.myform.sex.value;
 79                 data[3] = document.myform.age.value;
 80                 
 81                 //获取表格并申请添加一行
 82                 var tbody = document.getElementById("tid").getElementsByTagName("tbody")[0];
 83                 //遍历数据并添加
 84                 var tr = document.createElement("tr");
 85                 for(var i=0;i<data.length;i++){
 86                     var td = document.createElement("td");
 87                     var text = document.createTextNode(data[i]);
 88                     td.appendChild(text);
 89                     tr.appendChild(td);
 90                 }
 91                 var td = document.createElement("td");
 92                 td.innerHTML = '<button onclick="dodel(this)">删除</button>';
 93                 tr.appendChild(td);
 94                 tbody.appendChild(tr);
 95                 
 96                 //当前表单清空
 97                 document.myform.reset();
 98                 
 99                 return false;
100             }
101         </script>
102     </body>
103 </html>

View Code