元素操作类

  1         class Ele{
  2             constructor(){
  3                 
  4             }
  5             removeEle(obj){
  6                 obj.parentNode.removeChild(obj);
  7             }
  8             createEle(obj){
  9                 try{
 10                     var ele = document.createElement(obj.tag);
 11                     
 12                 if(obj.class)
 13                 {
 14                     ele.classList.add(obj.class);
 15                 }
 16                 if(obj.event && obj.evefun)
 17                 {
 18                     ele.addEventListener(obj.event,obj.evefun,true);
 19                 }
 20                 if(obj.attrs)
 21                 {
 22                     this.loops(obj.attrs,function(item,key,index){
 23                         ele.setAttribute(key,item);
 24                     })  
 25                 }
 26                 if(obj.text)
 27                 {
 28                     ele.innerText=obj.text;
 29                 }
 30                 return ele;
 31                 }catch(err){
 32                     alert(err);
 33                     return false;
 34                 }
 35                 
 36             }
 37             
 38             loops(obj,back){
 39                 let i = 0;
 40                 let arr = [];
 41                 for(let key  in obj)
 42                 {
 43                     arr.push(back(obj[key],key,i));
 44                     i++;
 45                 }
 46                 return arr;
 47             }
 48 
 49             nesting(parent,eles={}){
 50                 var that=this;
 51                 this.loops(eles,function(item,key,index){
 52                     if(item instanceof Object)
 53                     {                        
 54                         var elec=that.createEle({
 55                             "tag":key,
 56                         });
 57                         that.nesting(elec,item);
 58                         parent.appendChild(elec);
 59                     }
 60                     else{
 61                         var elec=that.createEle({
 62                             "tag":key,
 63                             "text":item,
 64                          });
 65                          parent.appendChild(elec);
 66                     }
 67                 });
 68             }
 69 
 70         }
 71         
 72         var a=new Ele();
 73         var ele=a.createEle({
 74             "tag":"div",
 75             "attrs":{
 76                 ‘class‘:"a b c d",
 77                 ‘style‘:‘width:300px;height:200px;background:#ccc;‘,
 78                 ‘id‘:"loadimg"
 79             }
 80         });
 81         document.body.appendChild(ele);
 82         var as=document.getElementById(‘a‘);
 83         // a.removeEle(ele);
 84         a.removeEle(as);
 85         var body=document.body;
 86         a.nesting(body,{
 87                     "a":{
 88                         ‘a1‘:"a11",
 89                         "a2":"a22",
 90                         "a3":"a33"
 91                         },
 92                     "b":{
 93                         ‘b1‘:"b11",
 94                         "b2":"b22",
 95                         "b3":"b33"
 96                         },
 97                     "c":{
 98                         ‘c1‘:"c11",
 99                         "c2":"c22",
100                         "c3":"c33"
101                         },
102                     "d":{
103                         ‘d1‘:"d11",
104                         "d2":"d22",
105                         "d3":"d33"
106                         },
107                     "e":{
108                         ‘e1‘:"e11",
109                         "e2":"e22",
110                         "e3":{
111                             "e31":"e31t",
112                             "e32":"e32t",
113                             "e33":"e33t"
114                             }
115                         },
116                 })