創建元素和對象的幾種方法
阿新 • • 發佈:2018-10-26
instance person food .get 初始化 eat 新的 對象 tel
創建元素的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這個對象返回
創建元素和對象的幾種方法