一、创建节点
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>