>[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> ~~~