XML DOM通过childNodes来获取所有子节点，此方法获取的节点包含空白文本节点。需要进行判断过滤。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>XML DOM 遍历</title> </head> <h1>XML DOM 遍历</h1> <body> <ul id="uid"> <li>张三</li> <li>李四</li> <li>王二</li> <li>麻子</li> </ul> </body> <script> //获取ul中的所有li节点 var mList = document.getElementById("uid").getElementsByTagName("li"); console.log("节点数量"+mList.length);//节点数量4 //通过子节点获取 var children = document.getElementById("uid").childNodes; console.log("节点数量"+children.length);//节点数量9（由于存在空白文本节点） //节点的遍历 for(var i = 0 ;i<children.length;i++){ //判断是否是元素节点 if(children[i].nodeType == 1){ // console.log(children[i].nodeType); console.log(children[i].innerHTML);//HTML DOM获取内容 console.log(children[i].firstChild.nodeValue);//XML DOM获取内容 } } </script> </html>要点：
获取所有要删除的节点。XML DOM中删除要使用其父节点下的removeChild（删除对象）方法，（可以通过parentNode获取其父节点）。删除多个时注意循环中的元素数量变化，指示数须自减1。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>XML DOM节点的删除</title> <style> ul{list-style:none;} ul li{line-height:30px;background-color:#ddd;margin-top:2px;} ul li:hover{background-color:#fc0;} ul li.cc{background-color:#f0c;} </style> </head> <body> <h1>XML DOM节点的删除</h1> <ul id="uid"> <li>一</li> <li>二</li> <li>三</li> <li>四</li> <li>五</li> <li>六</li> <li>七</li> <li>八</li> </ul> <button onclick="doDel()">删除</button> </body> <script> //获取所有ul中的li节点并绑定点击事件 var list = document.getElementsByTagName("li"); for(var i=0; i<list.length; i++){ list[i].onclick = function(){ this.setAttribute("class","cc"); } } //执行节点删除函数 function doDel(){ var list2 = document.getElementsByTagName("li"); //遍历 for(var i=0; i<list2.length; i++){ //判断当前li是否有class属性值为cc的 if(list2[i].getAttribute("class")=="cc"){ //执行删除 list2[i].parentNode.removeChild(list2[i]); //避免多选删除时列表长度变更导致的漏删 i--; } } } </script> </html>当向元素标签中添加非HTML属性时，HTML DOM 将不再支持，此时XML DOM的特点就体现出来。可以通过setAttribute（“属性类型”,“属性值”）。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript中的XML DOM</title> </head> <body> <h1>XML-DOM：改变节点的属性</h1> <a id="aid" href="http://www.baidu.com">百度</a> </body> <script> //获取上面超链接a元素节点 var a = document.getElementById("aid"); //通过已知的HTML DOM操作a节点属性 console.log(a.href); a.title="百度网址"; //a.aa = "bb"; //添加aa属性值为bb 无效的 //使用XML DOM操作节点a的属性 console.log(a.getAttribute("href")); a.setAttribute("aa","bb"); //通过XML DOM可以添加任何属性和值 </script> </html>XML DOM中每个节点是一个对象，通过appendChild()方法将一个对象添加到另一个节点中时，原节点中的对象会消失。所以如果想要添加的同时对原节点中的对象进行保留。要用到.cloneNode() 方法。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>XML DOM节点的克隆</title> <style> #did{width:400px;height:300px;border:1px solid blue;} img{width:80px;border:2px solid #fff;margin:2px;} img:hover{border:2px solid red;} </style> </head> <body> <h1>XML DOM节点的克隆</h1> <div id="did"></div> <div id="mid"> <img src="./images/1.jpg"/> <img src="./images/2.jpg"/> <img src="./images/3.jpg"/> <img src="./images/4.jpg"/> </div> <h4>双击图片可实现图片的添加</h4> </body> <script> //获取mid中的所有图片节点 var list = document.getElementById("mid").getElementsByTagName("img"); //遍历添加鼠标双击事件 for(var i=0; i<list.length; i++){ list[i].ondblclick = function(){ //获取did节点 var did = document.getElementById("did"); //将当前图片节点克隆一份添加到did元素节点中 did.appendChild(this.cloneNode()); } } </script> </html>replaceChild(新节点,被替换节点）将当前节点替换目标节点中的第一个子节点。 替换时如要保留替换节点，需要对替换节点进行克隆。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>XML DOM节点的替换</title> <style> #did{width:400px;border:1px solid blue;} #did img{width:400px;} #mid img{width:80px;border:2px solid #fff;margin:2px;} #mid img:hover{border:2px solid red;} </style> </head> <body> <h1>XML DOM节点的替换</h1> <div id="did"><img src="./images/11.jpg"/></div> <div id="mid"> <img src="./images/1.jpg"/> <img src="./images/2.jpg"/> <img src="./images/3.jpg"/> <img src="./images/4.jpg"/> </div> <h4>双击图片可实现图片的替换</h4> </body> <script> //获取id属性值为did的节点对象 var did = document.getElementById("did"); //获取id属性值为mid节点中的所有图片img元素节点 var list = document.getElementById("mid").getElementsByTagName("img"); //遍历图片节点，并绑定鼠标双击事件 for(var i=0; i<list.length; i++){ list[i].ondblclick = function(){ did.replaceChild(this.cloneNode(),did.firstChild); //子节点替换 } } </script> </html>删除：获取删除对象的父节点（一层或多层），通过父节点对象调用removeChild(“删除的对象”)方法. 添加：
获取表单信息。将表单信息存入变量/数组中。通过循环的方式创建一个或多个文本节点。创建一个或多个元素节点。将文本节点通过appenChild()嵌套入元素节点中。直接通过.innerHTML=" "添加删除按钮。重置表单中信息。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>XML DOM操作table表格</title> <style> select,option,div,button{margin:0px;padding:0px;} #lid,#rid,div{ width:80px; height:260px; float:left; } div{ text-align:center; padding-top:60px; } </style> </head> <body> <h1>XML DOM操作table表格</h1> <table id="tid" width="500" border="1"> <thead> <tr> <th>学号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1001</td> <td>张三</td> <td>男</td> <td>20</td> <td><button onclick="dodel(this)">删除</button></td> </tr> <tr> <td>1002</td> <td>李四</td> <td>女</td> <td>21</td> <td><button onclick="dodel(this)">删除</button></td> </tr> <tr> <td>1003</td> <td>王五</td> <td>男</td> <td>22</td> <td><button onclick="dodel(this)">删除</button></td> </tr> </tbody> </table> <br/><br/><br/> <h2>添加学生信息</h2> <form action="#" name="myform" onsubmit="return doAdd()"> 学号：<input type="text" name="sno"/><br/><br/> 姓名：<input type="text" name="name"/><br/><br/> 性别：<input type="text" name="sex"/><br/><br/> 年龄：<input type="text" name="age"/><br/><br/> <input type="submit" value="添加"/> </form> </body> <script> //执行数据删除操作 function dodel(bt){ bt.parentNode.parentNode.parentNode.removeChild(bt.parentNode.parentNode); } function doAdd(){ //获取表单信息 var data = new Array(); data[0] = document.myform.sno.value; data[1] = document.myform.name.value; data[2] = document.myform.sex.value; data[3] = document.myform.age.value; //获取tbody元素节点对象 var tbody = document.getElementById("tid").getElementsByTagName("tbody")[0]; //创建一个元素节点tr var tr = document.createElement("tr"); //遍历数据并创建td节点 for(var i=0; i<data.length; i++){ var td = document.createElement("td"); var text = document.createTextNode(data[i]); td.appendChild(text); tr.appendChild(td); } //添加删除按钮 var td = document.createElement("td"); td.innerHTML = '<button οnclick="dodel(this)">删除</button>'; tr.appendChild(td); //将行节点tr放置到tbody中 tbody.appendChild(tr); //清空表单 document.myform.reset(); return false; } </script> </html>