javascript 虚拟DOM转化成真实的DOM节点

Posted 2021-05-03

let vdom = {
    tag:"ul",
    attrs:{
        key:"111",
        "class":"ulclass"
    },
    innerText:"innerText", // 不属于子节点的文字
    children:[
        {
            tag:"li",
            attrs:{
                id:"aaa"
            },
            innerText:"1111"
        },{
            tag:"li",
            attrs:{
                id:"bbb"
            },
            innerText:"222"
        }
    ]
}

function vdomToDom(vdom){

    //创建根节点
    let realdom = document.createElement(vdom.tag)

    //设置属性
    for(key in vdom.attrs){
        realdom.setAttribute(key,vdom.attrs[key])
    }

    //设置节点内的文字
    if(realdom.innerText != undefined){   // 为什么不能用 if(realdom.innerText) ？？ 奇
        realdom.innerText = vdom.innerText
    }

    //添加子节点
    if(vdom.children){
        vdom.children.forEach(function (childVdom) {
            realdom.appendChild(vdomToDom(childVdom))
        })
    }

    return realdom
}

document.body.appendChild(vdomToDom(vdom))