前端VDom和Dom之间的转换

1、将DOM转化成树结构对象

const dom2tree = (dom) =>{
    const obj = {};
    obj.tag = dom.tagName;
    obj.children = [];
    dom.childNode.forEach(child => {
        obj.children.push(dom2tree(child));
    });
    return obj;
}

2、将树结构vnode转换为真实DOM结构

const  _render = (vnode) => {
    // 如果是数字类型转化为字符串
    if (typeof vnode === "number") {
      vnode = String(vnode);
    }
    // 字符串类型直接就是文本节点
    if (typeof vnode === "string") {
      return document.createTextNode(vnode);
    }
    // 普通DOM
    const dom = document.createElement(vnode.tag);
    if (vnode.attrs) {
      // 遍历属性
      Object.keys(vnode.attrs).forEach((key) => {
        const value = vnode.attrs[key];
        dom.setAttribute(key, value);
      });
    }
    // 子数组进行递归操作
    vnode.children.forEach((child) => dom.appendChild(_render(child)));
    return dom;
}