// 1. 正常的js 创建dom?
        // let boxContent = document.createElement("div");
        // 2. 正常的js 放入dom?
        // 父.appendChild(子);

        // 用 对象 去表达dom

        // let o = {
        //     el: "div",
        //     id: "app",
        //     innerText: "",
        //     style: {},
        //     elChildren: []
        // }

        class DOMClass {
            constructor(DOMObj, root) {
                if (DOMObj) {
                    this.d = this.createDOM(DOMObj, root);
                }

            }
            // 创建dom
            createDOM = (DOMObj, root) => {
                // 创建的 dom
                let cDOM = document.createElement(DOMObj.el);

                // 赋予属性
                for (const key in DOMObj) {
                    cDOM[key] = DOMObj[key];
                }

                // 赋予样式
                for (const key in DOMObj.style) {
                    cDOM.style[key] = DOMObj.style[key];
                }

                // 递归
                // 如果该盒子存在子盒子(多个或一个) 即创建子盒子 并丢进去
                DOMObj.elChildren && DOMObj.elChildren.forEach(element => {
                    // 将 孩子 挨个传入 生成dom 并丢到 父盒子中
                    this.createDOM(element, cDOM);

                });

                // 如果给容器 就帮你放入
                if (root) {
                    root.appendChild(cDOM);
                }
                return cDOM;
            }
        }