BFE.devAI解答 - JavaScript 代码题
118. Virtual DOM II - createElement

实现思路：

首先，我们先实现createElement方法。该方法负责生成DOM节点，并设置DOM节点的属性，该方法的参数分别是三个：tagName(string类型)，props(object类型)，和children。其中，tagName参数表示要生成的DOM节点的类型。我们可以在该方法内部将该参数传递给document.createElement方法，生成一个新的DOM节点。props参数表示要为该DOM节点设置的属性，我们可以使用JavaScript for...in循环遍历该对象，并使用node.setAttribute方法将属性设置到DOM节点上。

children参数表示的是该节点的子节点。该参数的类型有两种情况：

1.如果children是文本类型的字符串，我们需要使用document.createTextNode方法，将该字符串类型的文本包装成为一个文本节点对象，并使用node.append节点将它添加到当前节点（父节点）的末尾。

2.如果children是一个JSX类元素对象，那么我们需要进行递归调用createElement函数，将它转换成为真正的DOM节点，并使用node.append节点将它添加到当前节点的末尾即可。

接下来，我们实现render方法。该方法负责将创建好的DOM节点添加到页面上去。首先，我们需要为该方法设置两个参数：

1.element，表示要添加到页面上去的DOM节点；

2.container，表示容器，即我们要将DOM节点添加到哪个容器中去。

我们可以使用document.querySelector方法来查找指定的容器，并使用node.append方法将DOM节点添加到容器中去。实现代码如下：

function createElement(tagName, props, ...children) {
  const node = document.createElement(tagName);
  
  for(const key in props){
      if(props.hasOwnProperty(key)){
          node.setAttribute(key,props[key])
      }
  }

  for(const child of children){
      if(typeof child === "string"){
          node.append(document.createTextNode(child))
      }else{
          node.append(createElement(child.tag,child.attrs, ...child.children))
      }
  }
  
  return node;
}

function render(element, container) {
    container = document.querySelector(container)
    container.append(element)
}

最后的测试代码如下：

const h = createElement

render(h(
  'div',
  {},
  h('h1', {}, ' this is '),
  h(
    'p',
    { className: 'paragraph' },
    ' a ',
    h('button', {}, ' button '),
    ' from ',
    h('a', 
      { href: 'https://bfe.dev' }, 
      h('b', {}, 'BFE'),
      '.dev')
  )
))