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 = createElementrender(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')  )))