DOM增删改替换

2019-11-12 来源: anne_jia 发布在  https://www.cnblogs.com/anne-jia/p/11841010.html

一、在创建元素的时候为什么要把创建元素到也页面写到后面?
 
要求:创建一个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 .