虚拟dom转化到真实dom

// 把虚拟对象转成dom对象
function render(domObj) {
    // 根据元素类型来创建dom
    let el = document.createElement(domObj.type);

    // 遍历props对象，然后给创建的元素el设置属性
    for (let key in domObj.props) {
        // 设置属性的方法
        setAttr(el, key, domObj.props[key]);
    }

    // 遍历子节点数组
    domObj.children.forEach(child = >{
        // 需要注意的是：如果child是虚拟dom，就继续递归渲染
        if (child instanceof Element) {
            child = render(child);
        } else {
            // 只是普通的文本内容
            child = document.createTextNode(child);
        }
        // 把子节点添加到父节点中
        el.appendChild(child);
    });

    return el;
}

// 上面用到的设置属性
function setAttr(node, key, value) {
    // 需要判断key是什么
    switch (key) {
    case 'value':
        // 属性是value就要看标签类型了，input和textarea的value就需要做区别
        if (node.tagName.toLowerCase() === 'input' || node.tagName.toLowerCase() == 'textarea') {
            node.value = value;
        } else {
            node.setAttribute(key, value);
        }
        break;
    case 'style':
        node.style.cssText = value;
        break;
    default:
        node.setAttribute(key, value);
        break;
    }
}

// 将元素插入页面
function renderDom(el, target) {
    target.appendChild(el);
}

// 定义一个构造函数来
class Element {
    constructor(type, props, children) {
        this.type = type;
        this.props = props;
        this.children = children;
    }
}

//批量调用构造函数
function createElement(type,props,children){
    return new Element(type,props,children);
}

// 调用之前的createElement方法
let virtualDom = createElement('ul',{class:'list',style:'color:red;'},[
        createElement('li',{class:'item'},['利群']),
        createElement('li',{class:'item'},['玉溪']),
        createElement('li',{class:'item'},['黄鹤楼']),
    ]);

// 对象形势的结构展示
console.log(virtualDom);
            
// 渲染dom
let el = render(virtualDom); // 得到dom元素
console.log(el);
renderDom(el,document.querySelector('body'));