1. 构建虚拟DOM，参考资料：https://juejin.cn/post/6844903806132568072#heading-2【仅做为个人学习笔记，如有侵权，请联系本人】

　　 type: 指定元素的标签类型，如'li', 'div', 'a'等
　　 props: 表示指定元素身上的属性，如class, style, 自定义属性等
　　 children: 表示指定元素是否有子节点，参数以数组的形式传入

element.js 文件代码：

/* virtualDOM 基本结构 */
class element {
  constructor(type, props, children) {
    this.type = type;
    this.props = props;
    this.children = children;
  }
}
/* 创建虚拟DOM元素 */
function createElement(type, props, children) {
  return new element(type, props, children);
}
/* 将虚拟DOM渲染为真实DOM，并返回元素 */
function render(dom_object) {
  let el = document.createElement(dom_object.type);
  for (let key in dom_object.props) {
    setAttr(el, key, dom_object.props[key]);
  }
  dom_object.children.forEach(child => {
    child = (child instanceof element) ? render(child) : document.createTextNode(child);
    /* createTextNode 创建文本节点 */
    el.appendChild(child);
  });
  return el;
}
/* 为el设置属性，可不可以直接node.setAttribute(key, value)？ */
function setAttr(node, key, value) {
  if (key === 'value') {
    if (node.tagName.toLocaleLowerCase() === 'input'
        || node.tagName.toLocaleLowerCase() === 'textarea') {
      node.value = value;
    } else {
      node.setAttribute(key, value);
    }
  } else if (key === 'style') {
    node.style.cssText = value;
  } else {
    node.setAttribute(key, value);
  }
}
function renderDOM(el, target) {
  target.appendChild(el);
}

index.js 文件代码：

/**
 * index.js 程序入口
 */

let box = document.querySelector('.box');

let virtualdom = createElement('ul', {class: 'list'}, [
   createElement('li', {class: 'item'}, ['周杰伦']),
   createElement('li', {class: 'item'}, ['林俊杰']),
   createElement('li', {class: 'item'}, ['王力宏'])
]);

console.log(virtualdom); // 打印查看虚拟DOM结构
renderDOM(render(virtualdom), box); // 将虚拟DOM转化为真实DOM

index.html 代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>index</title>
</head>
<body>
  <div class="box"></div>
  <script src="element.js"></script>
  <script src="index.js"></script>
</body>
</html>