2022-09-07【将虚拟DOM转换成真实DOM】

将如下虚拟DOM转换成真正的DOM节点

{
            tag: 'DIV',
            attrs: {
                id: 'app'
            },
            children: [
                {
                    tag: 'P',
                    children: [
                        { tag: 'A', children: [] }
                    ]
                },
                {
                    tag: 'P',
                    children: [
                        { tag: 'A', children: [] },
                        { tag: 'A', children: [] }
                    ]
                }
            ]
        }

具体实现如下

function render(vnode) {
            const dom = document.createElement(vnode.tag)
            if (vnode.attrs) {
                Object.keys(vnode.attrs).forEach(ele => {
                    let value = vnode.attrs[ele]
                    dom.setAttribute(ele, value)
                })
            }
            vnode.children.forEach((child) => {
                dom.appendChild(render(child))
            })
            return dom
        }
        const dom = render(vdom)
        document.body.appendChild(dom)
        console.log(dom) 

最终呈现在浏览器的结果如下