技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> JavaScript --> 对大量子节点DOM操作的最佳实践方式

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

浏览:3136次  出处信息

有时要处理一个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);

建议继续学习:

  1. PHP Simple HTML DOM Parser 是一个不错的html/xml分析类    (阅读:5774)
  2. 仅100行的JavaScript DOM操作类库    (阅读:3384)
  3. phpQuery:像jQuery一样处理DOM    (阅读:3322)
  4. 获取Dom元素的X/Y坐标    (阅读:2850)
  5. React入门:关于虚拟DOM(Virtual DOM)    (阅读:2564)
  6. DOM元素上jQuery事件几点学习    (阅读:2421)
  7. JS操作iframe里的dom    (阅读:2343)
  8. DOM Storage全解析    (阅读:2267)
  9. 页面DOM加载顺序和用户视觉浏览顺序的一致性    (阅读:2237)
  10. DOM操作琐碎知识点    (阅读:2075)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
  • 作者:小寒    来源: 记事本
  • 标签: DOM
  • 发布时间:2011-06-23 00:29:36
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1