創建元素的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+"\n今年"+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+"\n我的年齡是"+this.age+"\n我的體重是"+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這個對象返回

創建元素和對象的幾種方法