您现在的位置:首页 --> JavaScript --> 对大量子节点DOM操作的最佳实践方式
对大量子节点DOM操作的最佳实践方式
浏览:3095次 出处信息
有时要处理一个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); |
建议继续学习:
- PHP Simple HTML DOM Parser 是一个不错的html/xml分析类 (阅读:5747)
- phpQuery:像jQuery一样处理DOM (阅读:3279)
- 仅100行的JavaScript DOM操作类库 (阅读:3254)
- 获取Dom元素的X/Y坐标 (阅读:2797)
- DOM元素上jQuery事件几点学习 (阅读:2371)
- JS操作iframe里的dom (阅读:2331)
- React入门:关于虚拟DOM(Virtual DOM) (阅读:2291)
- DOM Storage全解析 (阅读:2213)
- 页面DOM加载顺序和用户视觉浏览顺序的一致性 (阅读:2201)
- DOM操作琐碎知识点 (阅读:2031)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:自己写的一个轻量级javascript框架的设计模式
后一篇:javascript正则表达式教程 >>
文章信息
- 作者:小寒 来源: 记事本
- 标签: DOM
- 发布时间:2011-06-23 00:29:36
建议继续学习
近3天十大热文
- [714] WEB系统需要关注的一些点
- [288] 如何拿下简短的域名
- [20] 移动音乐产品梳理
- [15] 豆瓣是啥?
- [14] Chrome开发者工具的小技巧
- [14] Perl 的线程中的共享
- [14] 产品经理的取舍之道与抽象能力
- [13] 内存的惰性初始化
- [13] 一个 VLA (可变长度数组)的实现
- [12] 为什么工程师会造出蹩脚的产品