第十四课：js操作节点的插入，复制，移除

节点插入

appendChild方法，insertBefore方法是常用的两个节点插入方法，具体实现，请看js高级程序设计，或者自行百度。

这里提一下面试时经常会问到的问题，插入多个节点时，你是怎么插入的。如果你回答一个一个插入，那么每插入一次就会引起一次回流，插入100次，（面试官一般会说100，或者1000个节点的插入），就引起100次的回流，这势必让面试官觉得你连基本的东西都不懂，秒杀掉。

其实这时你应该用到的是文档碎片，先把新建的元素插入文档碎片中，然后再一次性的把文档碎片中的元素插入到页面中。不管添加多少个，只会引起一次回流。

 

节点的复制

cloneNode，复制节点，文档碎片对象也可以通过此方法复制。

但是IE6-IE8会自作多情的把节点上的attachEvent绑定的事件也一起复制。早些年，为了在IE6-IE8中不复制attachEvent事件，jQuery动用outerHTML复制节点。

另外，标准浏览器的cloneNode，只会复制元素写在标签内的属性与通过setAttribute设置的属性，而IE6-IE8还支持通过node.aaa = "xxx"，设置的属性复制。

IE6-IE8不能复制script节点的text属性。

IE6-IE8不能复制input和textarea标签的默认值。

IE6-IE8不能复制option节点的选中状态。

IE6-IE8不能复制checkbox和radio节点的选中状态。

IE6-IE7不能复制checkbox和radio节点的defaultChecked属性（就是没有这个属性了）。

所有浏览器会给没有value的checkbox一个默认的value值"on"，而chrome没有。

 

节点的移除

removeChild，创建Range对象选中目标节点然后deleteContents，textContent。

removeChild在ie6-7下有内存泄露问题.不仅跟垃圾回收有关还跟IE的DOM超空间有关。IE8尽管有DOM超空间，但是不会引起removeChild的内存泄露。

在IE6-IE8中存在一个DOM超空间的概念，当元素被移除DOM树，又有js关联时，元素不会消失，它被保存在一个叫做超空间的地方。可以用是否存在parentNode来判断元素是否在超空间。

举个例子：

var div = dcoument.createElement("div");

document.body.removeChild(documen.body.appendChild(div));     //appendChild返回新添加的节点

div.parentNode     //IE6-8下会显示object，因为js中的div变量关联着这个div元素，所以它会存在DOM超空间中，所以它的parentNode存在。但是其他浏览器就显示null。

if(div.parentNode )　　div.parentNode.nodeType     //11   ->   文档碎片

因此IE6-IE8下，如果内存中出现很多这样的碎片，将会很容易造成内存泄露。IE8进行了优化，所以解决了removeChild内存泄露问题。

对于IE6-IE7删除节点的方法，可以使用innerHTML="";

举个例子：

var div = dcoument.createElement("div");

documen.body.appendChild(div);

documen.body.innerHTML = "";

div.parentNode       //null，所有浏览器都是。

innerHTML 方式清除节点，不会弄到DOM超空间去。

但innerHTML删除节点，在IE6-8下也有个问题，

举一个例子：

<div id="test">test</div>

var div = dcoument.getElementById("test");

div.parentNode.removeChild(div);  

console.log(div.id    div.innerHTML)      //test   test   所有浏览器都是。

如果使用innerHTML ，

div.parentNode.innerHTML ="";  

console.log(div.id    div.innerHTML)      //test   test  标准浏览器。test  ""  IE6-IE8。

 

纯粹的js操作不会带来什么消耗，95%的消耗是DOM操作引起的。因此，我们在设置样式前，将元素移除DOM树，设置完后（因为设置的样式可能有多条，如果每条都会引起重绘甚至回流，那么性能会很差），再插回来（这样只会引起一次重绘或者回流）。因为对移除DOM树的元素进行操作，不会影响DOM树。

jQuery中，如果要实现以上功能，最好使用detach方法移除节点，因为此方法仅仅移除节点不会清除数据，而remove会清楚数据。（这里的数据是指jQuery本身的数据缓存系统中的数据）

下面介绍几种清空元素内部的API：node可以是元素节点或文档碎片对象

（1）while(node.firstChild)　　node.removeChild(node.firstChild)

（2）创建一个Range对象，设置边界（开始节点和结束节点），清空内容（边界里面的节点并且包括边界）。不支持ie8以及以下版本，

var deleteRange = document.createRange();

deleteRange.setStartBefore(node.firstChild);　　

deleteRange.setEndAfter(node.lastChild);

deleteRange.deleteContents();

（3）node.textContent = "";  textContent 是W3C版本的innerText（IE中的节点属性），不支持ie8以及以下版本 。     

 

 

加油！

转载于:https://www.cnblogs.com/chaojidan/p/4143479.html