init

Html-Javascript/js/DOMClass.js

@@ -0,0 +1,55 @@
+
+        // 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;
+            }
+        }
+
+        

Html-Javascript/js/hello.js

@@ -0,0 +1 @@
+console.log("hello js come");