>[danger]虚拟DOM转换成真实DOM **描述**：将如下 JSON格式的**虚拟DOM**结构转换成**真实DOM**结构。 ~~~ // vnode 结构 { tag: 'DIV', attrs: { id: "app" }, children: [ { tag: 'SPAN', children: [ { tag: 'A', children: [] } ] } ] } // 真实DOM 结构 <div id="app"> <span> <a></a> </span> </div> ~~~ **实现**： ~~~javascript function _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) => { dom.setAttribute(key, vnode.attrs[key]); }); } // 子数组进行递归操作 vnode.children.forEach((child) => dom.appendChild(_render(child))); return dom; } // 测试 let vnode = { tag: "DIV", attrs: { id: "app", }, children: [ { tag: "SPAN", children: [ { tag: "A", children: [], }, ], }, ], }; console.log(_render(vnode)); // <div id="app"><span><a></a></span></div> ~~~