模拟虚拟dom生成实际dom

代码语言：javascript复制

// 生成虚拟dom
function createVdom(tagName,props,children){
    const VDom={
        tagName,
        props,
        children
    }
    return VDom;
}

// 把虚拟dom转换成真实dom
function createRdom(vDom,elm){
    const {tagName,props,children}=vDom;
    //创建出真实的dom节点
    const rDom=document.createElement(tagName);
    // 给节点添加属性
    if(props){
        Object.keys(props).forEach(item=>{
            rDom.setAttribute(item,props[item]);
        })
    }
   //遍历children
    children.forEach(item=>{
        if(typeof item==='string'){
            const text=document.createTextNode(item);
            rDom.appendChild(text);
            elm.appendChild(rDom);
        }else{
            rDom.appendChild(creatRdom(item))
        }
    })
}


createRdom(createVdom("div",{id:"id",class:"box" ,alt:"提示"},["你好"]),document.getElementById('root'));

dom

0 人点赞