第十天
03-對象模型-第04天{創建結構}
節點操作
克隆節點 - cloneNode()
element.cloneNode(): 復制element節點-
參數:布爾值,
true代表深層克隆,把當前節點和內部所有節點都復制一份
-
false代表淺層克隆,只復制當前節點
<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復制一份 復制出來的clone和son沒有任何關系了
添加節點 - appendChild()
-
father.appendChild(son):將son節點追加到father內部的最后位置<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中 // 此時頁面結構應該為 <div id="father"> <div id="son"><div/> <div id="demo"></div> </div> <div id="demo"></div> #追加克隆節點對原節點不會產生影響 //如果代碼如下 則會將demo節點直接移動到father節點下 father.appendChild(demo);// demo是頁面上存在的節點 // 此時頁面結構應該為 <div id="father"> <div id="son"><div/> <div id="demo"></div> </div>
插入節點 - insertBefore()
-
father.inserBefore(son1,son2): 將son1插入到father節點下的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節點移動到father下的son前面 #插入克隆出來的節點也不會對原節點產生影響
移除節點 - removeChild()
-
father.removeChild(son): 將father下的son節點移除<div id="father"> <div id="son"><div/> </div> var father = document.getElementById("father"); var son = document.getElementById("son"); father.removeChild(son);// 直接將son節點刪除
獲取節點
獲取第一個子節點 - 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;// 獲取到的是文本節點 換行
獲取第一個子元素 - 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{
// 先找到第一個節點
var first = element.firstChild;
// 如果這個節點存在而且這個節點不是元素節點
while(first&&first.nodeType !== 1){
// 從這個節點向后繼續找下一個兄弟節點
first = first.nextSibling;
}
return first;
}
}
獲取最后一個子元素兼容寫法
// 獲取element的最后一個子元素
function getLastElement(element){
// 判斷是否支持這一寫法
if(element.lastElementChild){
return element.lastElementChild;
}else{
// 先找到最后一個個節點
var last = element.lastChild;
// 如果這個節點存在而且這個節點不是元素節點
while(last&&last.nodeType !== 1){
// 從這個節點向前繼續找上一個兄弟節點
last = last.previousSibling;
}
return last;
}
}
創建結構
document.write()
-
特點:只能被document調用,而且會覆蓋頁面上原有內容
document.write("<a ) // 可以在頁面上創建一個a標簽,而且會覆蓋頁面上原有的所有內容
innerHtml()
-
特點:往頁面添加html標簽,可以限定范圍
<div id="box"></div> var box = document.getElementById("box"); box.innerHtml = "<a ; // 追加后的結構為 <div id="box"> <a >百度</a> </div>
createElement()
-
特點:動態創建標簽,添加到頁面需要配合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.字符串轉換為文檔對象
// 3.把對象掛接到DOM樹上
// 4.渲染引擎根據新的DOM樹重新渲染
優化
### 數組拼接
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 = "百度";
}
