您现在的位置:首页 --> 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); |
建议继续学习:
- PHP Simple HTML DOM Parser 是一个不错的html/xml分析类 (阅读:5774)
- 仅100行的JavaScript DOM操作类库 (阅读:3384)
- phpQuery:像jQuery一样处理DOM (阅读:3322)
- 获取Dom元素的X/Y坐标 (阅读:2850)
- React入门:关于虚拟DOM(Virtual DOM) (阅读:2564)
- DOM元素上jQuery事件几点学习 (阅读:2421)
- JS操作iframe里的dom (阅读:2343)
- DOM Storage全解析 (阅读:2267)
- 页面DOM加载顺序和用户视觉浏览顺序的一致性 (阅读:2237)
- DOM操作琐碎知识点 (阅读:2075)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:自己写的一个轻量级javascript框架的设计模式
后一篇:javascript正则表达式教程 >>
文章信息
- 作者:小寒 来源: 记事本
- 标签: DOM
- 发布时间:2011-06-23 00:29:36
建议继续学习
近3天十大热文
- [54] IOS安全–浅谈关于IOS加固的几种方法
- [53] android 开发入门
- [52] 如何拿下简短的域名
- [51] 图书馆的世界纪录
- [49] Oracle MTS模式下 进程地址与会话信
- [49] Go Reflect 性能
- [47] 【社会化设计】自我(self)部分――欢迎区
- [46] 读书笔记-壹百度:百度十年千倍的29条法则
- [36] 程序员技术练级攻略
- [27] 视觉调整-设计师 vs. 逻辑