第十天
03-對象模型-第04天{創(chuàng)建結(jié)構(gòu)}
節(jié)點操作
克隆節(jié)點 - cloneNode()
element.cloneNode(): 復(fù)制element節(jié)點-
參數(shù):布爾值,
true代表深層克隆,把當(dāng)前節(jié)點和內(nèi)部所有節(jié)點都復(fù)制一份
-
false代表淺層克隆,只復(fù)制當(dāng)前節(jié)點
<div id="father"> <div id="son"><div/> </div> var father = document.getElementById("father"); var son = document.getElementById("son"); var clone = son.cloneNode(true);// 把son這個div復(fù)制一份 復(fù)制出來的clone和son沒有任何關(guān)系了
添加節(jié)點 - appendChild()
-
father.appendChild(son):將son節(jié)點追加到father內(nèi)部的最后位置<div id="father"> <div id="son"><div/> </div> <div id="demo"></div> var father = document.getElementById("father"); var demo = document.getElementById("demo"); var clone = demo.cloneNode(true);// 將demo克隆一份 father.appendChild(clone);// 將克隆出來的clone追加到father中 // 此時頁面結(jié)構(gòu)應(yīng)該為 <div id="father"> <div id="son"><div/> <div id="demo"></div> </div> <div id="demo"></div> #追加克隆節(jié)點對原節(jié)點不會產(chǎn)生影響 //如果代碼如下 則會將demo節(jié)點直接移動到father節(jié)點下 father.appendChild(demo);// demo是頁面上存在的節(jié)點 // 此時頁面結(jié)構(gòu)應(yīng)該為 <div id="father"> <div id="son"><div/> <div id="demo"></div> </div>
插入節(jié)點 - insertBefore()
-
father.inserBefore(son1,son2): 將son1插入到father節(jié)點下的son2前面<div id="father"> <div id="son"><div/> </div> <div id="demo"></div> var father = document.getElementById("father"); var son = document.getElementById("son"); var demo = document.getElementById("demo"); father.inserBefore(son,demo);//會直接將demo節(jié)點移動到father下的son前面 #插入克隆出來的節(jié)點也不會對原節(jié)點產(chǎn)生影響
移除節(jié)點 - removeChild()
-
father.removeChild(son): 將father下的son節(jié)點移除<div id="father"> <div id="son"><div/> </div> var father = document.getElementById("father"); var son = document.getElementById("son"); father.removeChild(son);// 直接將son節(jié)點刪除
獲取節(jié)點
獲取第一個子節(jié)點 - firstChild
<div id="father">
<div id="son1"><div/>
<div id="son2"><div/>
<div id="son3"><div/>
</div>
var father = document.getElementById("father");
var first = father.firstChild;// 獲取到的是文本節(jié)點 換行
獲取第一個子元素 - firstElementChild
<div id="father">
<div id="son1"><div/>
<div id="son2"><div/>
<div id="son3"><div/>
</div>
var father = document.getElementById("father");
var first = father.firstElementChild;// 獲取到的是son1
獲取第一個子元素兼容寫法
// 獲取element的第一個子元素
function getFirstElement(element){
// 判斷是否支持這一寫法
if(element.firstElementChild){
return element.firstElementChild;
}else{
// 先找到第一個節(jié)點
var first = element.firstChild;
// 如果這個節(jié)點存在而且這個節(jié)點不是元素節(jié)點
while(first&&first.nodeType !== 1){
// 從這個節(jié)點向后繼續(xù)找下一個兄弟節(jié)點
first = first.nextSibling;
}
return first;
}
}
獲取最后一個子元素兼容寫法
// 獲取element的最后一個子元素
function getLastElement(element){
// 判斷是否支持這一寫法
if(element.lastElementChild){
return element.lastElementChild;
}else{
// 先找到最后一個個節(jié)點
var last = element.lastChild;
// 如果這個節(jié)點存在而且這個節(jié)點不是元素節(jié)點
while(last&&last.nodeType !== 1){
// 從這個節(jié)點向前繼續(xù)找上一個兄弟節(jié)點
last = last.previousSibling;
}
return last;
}
}
創(chuàng)建結(jié)構(gòu)
document.write()
-
特點:只能被document調(diào)用,而且會覆蓋頁面上原有內(nèi)容
document.write("<a ) // 可以在頁面上創(chuàng)建一個a標(biāo)簽,而且會覆蓋頁面上原有的所有內(nèi)容
innerHtml()
-
特點:往頁面添加html標(biāo)簽,可以限定范圍
<div id="box"></div> var box = document.getElementById("box"); box.innerHtml = "<a ; // 追加后的結(jié)構(gòu)為 <div id="box"> <a >百度</a> </div>
createElement()
-
特點:動態(tài)創(chuàng)建標(biāo)簽,添加到頁面需要配合appendChild使用
<div id="box"></div> var box = document.getElementById("box"); var input = document.createElement("input"); input.type = "text"; box.appendChild(input);
性能問題
<div id="box"></div>
var box = document.getElementById("box");
for(var i=0;i<1000;i++){
box.innerHtml += "<a ;
}
// 1.大量拼接字符串
// 2.字符串轉(zhuǎn)換為文檔對象
// 3.把對象掛接到DOM樹上
// 4.渲染引擎根據(jù)新的DOM樹重新渲染
優(yōu)化
### 數(shù)組拼接
var arr = [];
for(var i=0;i<1000;i++){
arr.push("<a );
}
box.innerHtml = arr.join("");
### createElement
for(var i=0;i<1000;i++){
var a = document.createElement("a");
box.apendChild(a);
a.;
a.innerHtml = "百度";
}
