2022-05-22 封装一个可动态创建节点的类

需求

封装一个类,可以动态地创建节点,
标签节点该有的样式和属性它都有,可以追加到页面中

要点

运用面向对象的思想,把需求分为四个部分
1,节点创建
2.设置样式
3.设置属性
4.节点追加
把它们作为类方法进行定义即可

代码实现

<div id="app">
    <!-- <img src="../../Pictures/IMG114413.jpg"> -->
</div>
<script>
    class CreateTag {
        constructor(tag, styleObj, attrObj, parent) {
          // 这些this不能漏掉
            this.tagObj = document.createElement(tag);
            this.styleObj = styleObj;
            this.attrObj = attrObj;
            this.parent = parent;
            this.setStyle();
            this.setAttr();
            this.appendTag();
        }
        setStyle() {
            Object.assign(this.tagObj.style, this.styleObj);//深拷贝
        }
        setAttr() {
            Object.assign(this.tagObj, this.attrObj);
        }
        appendTag() {
            this.parent.appendChild(this.tagObj);//追加
        }
    }
    let ct1 = new CreateTag("img", {
        width: "400px",
        height: "300px"
    }, {
        src: '../../Pictures/IMG114413.jpg'
    }, document.getElementById("app"));//把img追加到app下
</script>

知识点

1.节点的增删改查
2.Object.assign进行深拷贝