将真实dom保存到内存中，将内存中的vnode变成真实dom

        <div id="demo" class="test">
            <p>你好javascript</p>
            <ul>
                <li>{ {name}}</li>
            </ul>
        </div>
        <script type="text/javascript">
            let demoNode = document.querySelector("#demo");
            
            
            class Vnode{
                constructor(tage,data,value,type) {
                    this.tage = tage;
                    this.data = data;
                    this.value = value;
                    this.type = type;
                    this.childen = [];
                }
                appendChilden(vnode){
                    this.childen.push(vnode)
                }
            }
            
            
            //生成vnode的方法
            var createVnode = (node)=>{
                node = typeof node=="string"?document.querySelector(node):node;
                let type = node.nodeType;//1表示标签  3表示文本
                let tagName = node.nodeName;
                tagName = tagName.toLowerCase();
                let val = node.nodeValue;
                let vnode;
                if(type===1){//标签节点处理
                    let attrs = node.attributes;
                    let childen = node.childNodes;//包含了文本加标签
                    let attrsObj = {};
                    
                    for(let i = 0;i<attrs.length;i++){
                        attrsObj[attrs[i].nodeName] = attrs[i].nodeValue;
                    }
                    
                    vnode = new Vnode(tagName,attrsObj,val,type);
                    
                    
                    for(let k = 0;k<childen.length;k++){
                        vnode.appendChilden(createVnode(childen[k]))
                    }
                }else if(type===3){//文本节点处理
                    vnode = new Vnode(null,null,val,type);
                }
                return vnode;
            }
            
            let VNODE = createVnode(demoNode)
            
            let createRealNode = (vnode)=>{
                
                if(vnode.type===3){//文本节点
                    return document.createTextNode(vnode.value)
                }else if(vnode.type===1){//标签节点
                    //创建标签
                    let node = document.createElement(vnode.tage);
                    //设置属性
                    Object.keys(vnode.data).forEach(keys=>{
                        node.setAttribute(keys,vnode.data[keys])
                    })
                     
                    vnode.childen.length&&vnode.childen.forEach(item=>{
                        node.appendChild(createRealNode(item))//递归子节点
                    })
                    return node
                }
                
            }
            let REALNODE = createRealNode(VNODE)
            console.log(REALNODE)