DOM创建和删除节点
一、创建节点
3步
1.创建空元素对象：
var newElem=document.createElement("标签名");
例如：var a=document.createElement("a");//<a></a>
2.设置必要属性
newElem.属性名="值";
newElem.innerHTML="文本";
例如：a.href="http://tmooc.cn";a.innerHTML="go to tmooc";
3.将元素对象挂载到指定父元素下(2种)
追加：parent.appendChild(newElem);
插入新元素：parent.insertBefore(newElem,oldElem);
强调：只有向已经在页面中的父元素追加新节点，才导致渲染
二、创建文档片段
文档片段：内存中，临时存储多个子节点的存储空间
减少渲染频率： 先将所有平级元素先追加到文档片段中,将文档片段一次性追加到父元素下.
var frag=new document.createDocumentFragment();
示例：动态创建表格
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>动态创建表格</title> 5 <meta charset="utf-8" /> 6 <style> 7 table{width:600px; border-collapse:collapse; 8 text-align:center; 9 } 10 td,th{border:1px solid #ccc} 11 </style> 12 <script> 13 14 //加入从服务器端收到json字符串如下： 15 var json="[{'ename':'Tom','salary':5000,'age':25},{'ename':'John','salary':7000,'age':28},{'ename':'mary','salary':6000,'age':26}]"; 16 //使用eval函数，将json字符串，转化为程序中的对象 17 var emps=eval('('+json+')'); 18 console.log(emps); 19 //当页面加载后，在data div中创建table对象及子对象 20 window.onload=function(){ 21 //step1:创建空table对象 22 var table=document.createElement("table"); 23 //step2:添加表头行 24 25 /* 26 2.1创建空的tr对象，临时保存在tr中 27 2.2创建3个空th对象，分别是 姓名 薪资 年龄 28 2.3将三个th分别追加到tr对象下 29 2.4将tr追加到table对象下 30 */ 31 var tr=document.createElement("tr"); 32 var th1=document.createElement("th"); 33 th1.innerHTML="姓名"; 34 var th2=document.createElement("th"); 35 th2.innerHTML="薪资"; 36 var th3=document.createElement("th"); 37 th3.innerHTML="年龄"; 38 tr.appendChild(th1); 39 tr.appendChild(th2); 40 tr.appendChild(th3); 41 table.appendChild(tr); 42 43 //遍历emps数组，将数组中每个对象添加到table中 44 for (var i=0; i<emps.length; i++) 45 { 46 //建立一个tr元素 47 var tr=document.createElement("tr"); 48 for (var x in emps[i]) 49 { 50 //设置td元素 51 var td=document.createElement("td"); 52 if (x=="salary") 53 { 54 td.innerHTML="¥"+emps[i][x].toFixed(2); 55 }else{ 56 td.innerHTML=emps[i][x]; 57 } 58 //将td追加到tr中 59 tr.appendChild(td); 60 } 61 //将tr追加到table中 62 table.appendChild(tr); 63 } 64 65 //Step2:找到data div,将table追加到data下 66 document.querySelector("#data").appendChild(table); 67 } 68 69 </script> 70 </head> 71 <body> 72 <div id="data"></div> 73 </body> 74 </html>
三、删除、替换节点
1.删除节点
parent.removeChild(oldElem);
oldElem.parentNode.removeChild(oldElem);
2.替换节点：parent.replaceChild(newElem,oldElem);
示例：联动菜单 自动添加和删除节点
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>联动菜单</title> 5 <meta charset="utf-8" /> 6 <script> 7 /*使用 HTML DOM 的方式实现联动菜单*/ 8 var categories=[ 9 {"id":10,"name":'男装',"children":[ 10 {"id":101,"name":'正装'}, 11 {"id":102,"name":'T恤'}, 12 {"id":103,"name":'裤衩'} 13 ]}, 14 {"id":20,"name":'女装',"children":[ 15 {"id":201,"name":'短裙'}, 16 {"id":202,"name":'连衣裙'}, 17 {"id":203,"name":'裤子',"children":[ 18 {"id":2031,"name":'长裤'}, 19 {"id":2031,"name":'九分裤'}, 20 {"id":2031,"name":'七分裤'} 21 ]}, 22 ]}, 23 {"id":30,"name":'童装',"children":[ 24 {"id":301,"name":'帽子'}, 25 {"id":302,"name":'套装',"children":[ 26 {"id":3021,"name":"0-3岁"}, 27 {"id":3021,"name":"3-6岁"}, 28 {"id":3021,"name":"6-9岁"}, 29 {"id":3021,"name":"9-12岁"} 30 ]}, 31 {"id":303,"name":'手套'} 32 ]} 33 ]; 34 35 //专门遍历一级分类 data保存当前同级分类的数组 36 function loadData(data){ 37 //创建一个select对象 38 //在select对象中追加一个新option，内容为请选择"-请选择-",值为0 39 //遍历data中每个类别对象 40 // 每遍历一个，就要在select中追加一个option，内容是当前对象的name属性值为当前对象的id属性 41 // 42 var select=document.createElement("select"); 43 select.add(new Option("-请选择-",0)); 44 for (var key in data) 45 { 46 select.add(new Option(data[key].name,data[key].id)); 47 } 48 //为新创建的select对象，添加onchange时间 49 select.onchange=function(){ 50 //this-->select 51 52 //将当前select后的元素都删除 53 var parent=this.parentNode; 54 while(parent.lastChild!=this){ 55 parent.removeChild(parent.lastChild); 56 } 57 58 /* 59 获得和选中项位置对应的类别子对象 60 */ 61 var category=data[this.selectedIndex-1]; 62 if(category!=undefined&&category.children){ 63 loadData(category.children); 64 } 65 } 66 document.querySelector("#category").appendChild(select); 67 68 } 69 70 window.onload=function(){ 71 loadData(categories); 72 } 73 74 </script> 75 </head> 76 <body> 77 <div id="category"></div> 78 </body> 79 </html>
