DOM增刪改替換

1、在建立元素的時候爲何要把建立元素到也頁面寫到後面？

 

要求：建立一個div,在div中建立10個span.

var div = document.createElement("div");
//document.body.appendChild(div);


for(var i=0;i<10;i++){
    var span = document.creatElement("span");
        div.appendChild(span);
}
document.body.appendChild(div);

緣由是若是寫在前面就建立一個span 就要打開一次body,div寫入，這樣的效率太慢啦。可是若是先講span 在內存中直接寫入，這樣就打開2次，這樣一次行就節省了不少的效率。

先建立一個容器，將子元素，放到父容器中，最後講父容器放到頁面中。

 

若是必定要寫入到body頁面中。就用碎片容器。

//建立碎片容器：
var elem = document.createDocumentFragment();
for(var i =0;i<10;i++){
var div = document.creatElement("div");
}
document.body.appendChile(elem);

2、刪除元素三部曲

//元素刪除的時候應該先刪除事件，在刪除元素。由於純粹的刪除的元素只是從Dom書中刪除，並無刪除內容。刪除元素的步驟：

第一步：刪除事件

 

第二步：刪除元素

 

第三步：將元素設爲null

var div = document.createElement("div");
var span = document.createElement("span");
span.addEventListener("click",clickHandler);

div.appendChild(span);
document.body.appendChild(div);
function clickHandler(e){
    span.textContent="歡迎";
}
//刪除以前的將事件刪除
span.removeEventListener("click",clickHandler);
//使用onclick事件的時候,刪除方法刪除事件
//span.onclick=null

//刪除元素
div.removeChild(span);
span=null;

div.appendChild(span);
//此時的span再也不是節點，是null,再添加的時候就會報錯

3、替換元素：

父容器.removeChild(新元素，要替換掉的舊元素)

 4、複製元素：

源元素.cloneNode(deep)

deep 是深度的意思；

true：時是深度賦值，將子元素和內容一塊兒賦值，源元素的屬性複製

false: 是潛複製，將源元素和屬性複製

注意：

若是使用 cloneNode 複製元素的時候，必須修改元素的 id .