render函数和dom To JSON

// 虚拟dom转化为真实dom
function render(node) {
  if (typeof node === "string") {
    // 创建文本节点
    return document.createTextNode(node);
  }
  // 创建对应的dom节点
  let dom = document.createElement(node.tag);
  if (node.attrs) {
    // 设置dom属性
    Object.keys(node.attrs).forEach(key => {
      dom.setAttribute(key, node.attrs[key]);
    });
  }
  // 递归生成子节点
  if (node.children) {
    node.children.forEach(item => {
      dom.appendChild(render(item));
    });
  }
  return dom;
}

 // 将真实dom转化为虚拟dom
function domToJson(node) {
  let obj = {};

  // 存储节点名称和节点类型
  obj.nodeName = node.nodeName;
  obj.nodeType = node.nodeType;

  // 存储节点的属性
  if (node.attributes && node.attributes.length > 0) {
    obj.attributes = {};

    for (let i = 0; i < node.attributes.length; i++) {
      let attr = node.attributes[i];
      obj.attributes[attr.nodeName] = attr.nodeValue;
    }
  }

  // 存储节点的子节点
  if (node.childNodes && node.childNodes.length > 0) {
    obj.childNodes = [];

    for (let i = 0; i < node.childNodes.length; i++) {
      let child = node.childNodes[i];
      // nodeType 为1表示元素节点，3为文本节点
      if (child.nodeType === 1) {
        obj.childNodes.push(domToJson(child));
      } else if (child.nodeType === 3) {
        obj.childNodes.push(child.nodeValue);
      }
    }
  }

  return obj;
}

Henry-Diasa / awesome_interview_question

render函数和dom To JSON #493