手写一个简单的虚拟dom渲染

let domNode {
  tagName: 'ul',
  props: {class: 'list'},
  children: [{
    tagName: 'li',
    childrem: ['item1'],
  },{
    tagName: 'li',
    childrem: ['item2'],
  }],
}

构建一个render函数，将dom对象渲染为以下dom

<ul class="list">
  <li>item1</li>
  <li>item2</li>
</ul>

实现方法，注意边界条件

function render(domNode) {
  if (!domNode) return document.createDocumentFragment()
  let $el
  
  if (typeof domNode === 'object') {
    $el = document.createElement(domNode.tagName)
    
    if(domNode.hasOwnProperty('props')) {
      for (let key in domNode.props) {
        $el.setAttribute(key, domNode.props[key])
      }
    }
    
    if (domNode.hasOwnProperty('children')) {
      domNode.children.forEach((val) => {
        const $childEl = render(val)
        $el.appendChild($childEl)
      })
    } else {
      $el = document.createTextNode(domNode)
    }
  }
  
  return $el
 
}