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));