56 lines
1.5 KiB
JavaScript
56 lines
1.5 KiB
JavaScript
|
|
// 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;
|
|
}
|
|
}
|
|
|
|
|