javascript 原生js对html元素的 增删改查 操作

 'use strict';

 class View{

     constructor(){

     }

     //创建html元素
     addEl(fel, elemName, id, cls){
         //创建一个元素
         let el = document.createElement(elemName);
         //设置el id 和 class
         if(id){el.setAttribute('id',id);}
         if(cls){el.className = cls;}
         //把el添加到fel并显示（渲染el）
         if(fel){fel.appendChild(el);}
         return el;
     }

     //删除html元素
     delEl(){
         let k, arg = arguments, err = [];
         for(k = 0; k < arg.length; k++){
             if(this.isEl(arg[k]) === false){err.push(arg[k]); continue;}
             arg[k].parentNode.removeChild(arg[k]);
         }
         if(err.length > 0){return {err:'这里有一些删除失败的元素', arr:err};}
         return true;
     }

     //id获取html元素
     getEl(id){
         return document.getElementById(id);
     }

     //通过parentNode检查元素是否存在于页面中
     isEl(el){
         if(typeof(el) !== 'object'){return false;}
         //被删除之后的html元素object的 parentNode等于null
         if(!el.parentNode){return false;}
         return true;
     }

     //元素绑定事件
     addEvent(target, callback){
         //target.addEventListener('click', function(event){if(callback){callback(event);}}, false);
     }

 }

 let v = new View();

 console.log('创建元素');
 let el_a = v.addEl(document.body, "p");
 let el_b = v.addEl(document.body, "p");
 let el_c = v.addEl(document.body, "p");

 console.log('验证元素_0');
 console.log(v.isEl(el_a));//true
 console.log(v.isEl(el_b));//true
 console.log(v.isEl(el_c));//true

 console.log('删除元素_0');
 console.log(v.delEl(el_a, el_b));
 console.log(v.delEl(el_c));

 console.log('验证元素_1');
 console.log(v.isEl(el_a));
 console.log(v.isEl(el_b));
 console.log(v.isEl(el_c));

 console.log('删除元素_1');
 console.log(v.delEl(el_a, el_b));
 console.log(v.delEl(el_c));