对大量子节点DOM操作的最佳实践方式 -- JavaScript -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> JavaScript --> 对大量子节点DOM操作的最佳实践方式

对大量子节点DOM操作的最佳实践方式

浏览:3800次出处信息

有时要处理一个DOM节点下面的大量子节点，比如对一个ul一次性插入几百个li，或者清空一个ul下面的所有li，或者是替换掉ul下面的所有内容。本文记录一下最佳的实践方式。

插入子节点

用innerHTML的方式要优于appendChild，但切记不要在循环里用innerHTML += “str”这样的方式，可以先把字符串拼接好，最后再赋值给innerHTML。

替换全部子节点

用replaceChild的方式要优于直接给innerHTML赋值。在firefox下，如果一个元素有大量子节点，给这个元素的innerHTML赋值将会十分的慢，目前最好的办法是Clone这个元素得到新元素，然后给新元素的innerHTML赋值，最后用新元素替换掉旧元素。代码如下：

var str = '', 
  test = document.getElementById('test'), 
  newUL = test.cloneNode(false); 
  
for(var i = 0; i < iteration; i++) { 
  str += '<li>Test</li>'; 
} 
newUL.innerHTML = str; 
test.parentNode.replaceChild(newUL, test);

清除全部子节点

用replaceChild的方式要优于innerHTML = ”，道理同“替换全部子节点”。不要用removeChild循环清空一个元素下面的所有子节点，这种方式在IE 8下非常慢。代码如下：

var test = document.getElementById('test'), 
  newUL = test.cloneNode(false); 
  
test.parentNode.replaceChild(newUL, test);

建议继续学习：

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习

<< 前一篇：自己写的一个轻量级javascript框架的设计模式

后一篇：javascript正则表达式教程 >>

文章信息

作者：小寒来源：记事本
标签： DOM
发布时间：2011-06-23 00:29:36

建议继续学习

近3天十大热文