原生JS模拟虚拟dom，虚拟dom转真实dom

<div id="root" class="aaa">
    <div class="title">11</div>
    <div class="title">222</div>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
</div>

<script type="text/javascript">
    class VNode {
        constructor(name, attrs, value, type) {
            this.name = name
            this.attrs = attrs
            this.value = value
            this.type = type
            this.children = []
        }
        addChildren(node) {
            this.children.push(node)
        }
    }

    function create(node) {
        let _vnode = null
        if (node.nodeType === 1) {
            const attributes = [...node.attributes]
            const attrs = attributes.reduce((prev, curr) => {
                prev[curr.name] = curr.value
                return prev
            }, {});
            _vnode = new VNode(node.nodeName.toLowerCase(), attrs, null, node.nodeType)
            for (let item of node.childNodes) {
                _vnode.addChildren(create(item))
            }
        } else if (node.nodeType === 3) {
            _vnode = new VNode(node.nodeName.toLowerCase(), null, node.nodeValue, node.nodeType)
        }
        return _vnode
    }

    let vnode = create(document.querySelector("#root"))
    console.log(vnode);

    function parse(node) {
        let nodeEl = null
        if (node.type === 1) {
            nodeEl = document.createElement(node.name)
            for (let key in node.attrs) nodeEl.setAttribute(key, node.attrs[key])
            node.children.forEach(item => {
                nodeEl.appendChild(parse(item))
            });
        } else {
            nodeEl = document.createTextNode(node.value)
        }
        return nodeEl
    }

    let dom = parse(vnode)
    console.log(dom);
</script>