init

2023-05-01 19:37:40 +08:00
commit da2c0fadf7
133 changed files with 29002 additions and 0 deletions
--- a/Html-Javascript/28-DOMClass.html
+++ b/Html-Javascript/28-DOMClass.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+
+    <div id="app">
+
+    </div>
+
+    <script>
+
+        // 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;
+            }
+        }
+
+
+
+        new DOMClass({
+            el: "img",
+            src: "https://img1.baidu.com/it/u=1551191955,2379059527&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
+            ,style: {
+                width: "300px"
+            }
+        }, document.querySelector("#app"));
+
+        new DOMClass({
+            el: "a",
+            href: "http://www.jd.com",
+            innerText: "去百度"
+        }, document.querySelector("#app"));
+
+
+        
+    </script>
+
+
+</body>
+
+</html>