95 lines
2.3 KiB
HTML
95 lines
2.3 KiB
HTML
<!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> |