DOM增删改替换

一、在创建元素的时候为什么要把创建元素到也页面写到后面？

要求：创建一个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);

二、删除元素三部曲

//元素删除的时候应该先删除事件，在删除元素。因为纯粹的删除的元素只是从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,再添加的时候就会报错

三、替换元素：

父容器.removeChild(新元素，要替换掉的旧元素)

四、复制元素：

源元素.cloneNode(deep)

deep 是深度的意思；

true：时是深度赋值，将子元素和内容一起赋值，源元素的属性复制

false: 是潜复制，将源元素和属性复制

注意：

如果使用 cloneNode 复制元素的时候，必须修改元素的 id .

巴特西

DOM增删改替换

最新文章

热门文章