虚拟dom转真实dom

Huy小于 1 分钟

将下面的虚拟 dom 转换为真实 dom：

const vnode = {
  tag: 'div',
  attrs: {
    id: 'app',
  },
  children: [
    {
      tag: 'span',
      children: [
        {
          tag: 'a',
          text: 'hello',
          children: [],
        },
      ],
    },
    {
      tag: 'span',
      children: [
        {
          tag: 'a',
          text: 'world',
          children: [],
        },
        {
          tag: 'a',
          text: 'javascript',
          children: [],
        },
      ],
    },
  ],
}
render(vnode, document.querySelector('#root'))

function render(vnode, container) {}

首先分析 DOM 结构，然后根据结构创建对应的真实 DOM 元素，最后将创建的 DOM 元素插入到容器中。

function render(vnode, container) {
  // 1. 创建元素
  const el = document.createElement(vnode.tag)
  // 2. 设置属性
  if (vnode.attrs) {
    for (const key in vnode.attrs) {
      el.setAttribute(key, vnode.attrs[key])
    }
  }
  // 3. 递归设置子元素
  if (vnode.children) {
    vnode.children.forEach((child) => render(child, el))
  }

  // 4. 若有文本内容，则添加到元素中
  if (vnode.text) {
    el.textContent = vnode.text
  }

  // 5. 将元素添加到容器中
  container.appendChild(el)
}