创建元素和对象的几种方法

Posted 2021-01-15 dawnwill

创建元素的3种方法

---

 

1、document.write()

    <div>
        明月几时有，把酒问青天！
    </div>
    <button id="btn">点击</button>

    <script>
        var btn = document.getElementById(‘btn‘)
        btn.onclick = function () {
            document.write(‘水调歌头‘)
        }
    </script>

缺陷：如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部覆盖

 

2、obj.innerhtml

    <div id="box">
        <span>明月几时有</span>
    </div>
    <button id="btn">点击</button>

    <script>
        var btn = document.getElementById(‘btn‘)
        var box = document.getElementById(‘box‘)

        btn.onclick = function () {
            box.innerHTML = ‘<p>水调歌头</p>‘
        }
    </script>

 

3、document.createElement

    <div id="box">
        <span>明月几时有</span>
    </div>
    <button id="btn">点击添加</button>

    <script>
        var btn = document.getElementById(‘btn‘)
        var box = document.getElementById(‘box‘)

        btn.onclick = function () {
            var p = document.createElement(‘p‘)
            p.innerHTML = ‘把酒问青天‘
            box.appendChild(p)
        }
    </script>

 

 

创建对象的4种方法

---

 

1、调用系统的构造函数创建对象

        var dog=new Object();
        dog.name="小白";
        dog.age=4;
        dog.weight=50;
        dog.eat=function(){
            //在当前这个对象的方法中是可以访问当前这个对象的属性的值
            console.log("喜欢吃猪肉铺！，今年"+this.age+"岁");
        }
        dog.walk=function(){
            //在当前这个对象的方法中是可以访问当前这个对象的属性的值
            console.log(this.name+this.weight+"斤,"+"喜欢跳着走路！");
        }
        
        dog.eat();
        dog.walk();

        // 检测当前对象是不是属于Object类型
        console.log(dog instanceof Object);

对象有特征（属性）和行为（方法）

 

2、字面量创建对象

        var dog={
            name:"小白",
            age:4,
            food:"鸡腿",
            say:function(){
                console.log("狗的名字叫"+this.name+"
今年"+this.age);
            },
            eat:function(){
                console.log("最喜欢吃的是"+this.food);
            }
        };
        dog.say();
        dog.eat();

字面量创建对象缺陷：一次性对象，无法传值

 

3、工厂函数创建对象

        function person(name,age){
            var dog=new Object();//创建对象
            //添加属性
            dog.name=name;
            dog.age=age;
            //添加方法
            dog.information=function(){
                console.log("My dog‘s name is "+this.name+",今年"+this.age+"岁");
            }
            // 返回值为对象
            return dog;
        }

        // 创建输出对象
        var dog1=person("小白",4);
        dog1.information();
        
        var dog2=person("仔仔",2);
        dog2.information();

 

4、自定义构造函数创建对象

　　自定义构造函数创建对象,自己定义一个构造函数（对象类型）,然后创建对象

　　函数和构造函数的区别；首字母是不是大写

        // 创建一个构造函数
        function Dog(name,age,weight){
            this.name=name;
            this.age=age;
            this.weight=weight;
            this.say=function(){
                console.log("我的名字是"+this.name+"
我的年龄是"+this.age+"
我的体重是"+this.weight);
            }
        }
        // 创建对象——实例化一个对象。并初始化
        var dog1=new Dog("小白",4,30);
        dog1.say();

        var dog2=new Dog("崽崽",2,15);
        dog2.say();
        
        console.log(dog1 instanceof Dog);
        console.log(dog2 instanceof Dog);

自定义构造函数的过程
1. 在内存中开辟(申请一块空闲的空间)空间,存储创建的新的对象
2. 把this设置为当前的对象
3. 设置对象的属性和方法的值
4. 把this这个对象返回