初识javascript 文档碎片
更新时间：2010年07月13日 20:22:17 作者：
今天遇到一个问题: 我通过 ajax 取回另一个页面的 Html 。但这些 HTML 我不想直接输出，想通过 getElementsByName 处理后再输出相应的内容。用原生的 javascript怎样可以处理呢？
后来是一技术群问到以下一段代码：
function html2node(s) {
var d = document.createElement('div');
d.innerHTML = s;
if (d.childNodes.length == 1)
return d.childNodes[0];
var df = document.createDocumentFragment();
while (d.firstChild)
df.appendChild(d.firstChild);
return df;
}
大概的原理都明白，比较困惑的是为什么要用 document.createDocumentFragment 呢？
后来在网上搜索了一下相关资源才知道，document.createDocumentFragment 是用来创建文档碎片的。
当我们需要大量 appendChild 页面元素时，可以先将这些元素 appendChild 进document.createDocumentFragment。
然后只需 appendChild 文档碎片到页面就可以了。这样就不用多次刷新页面达到性能优化的目的。上面那个代码我觉得用到文档碎片是多余的。
复制代码 代码如下:
function html2node(s) {
var d = document.createElement('div');
d.innerHTML = s;
if (d.childNodes.length == 1)
return d.childNodes[0];
var df = document.createDocumentFragment();
while (d.firstChild)
df.appendChild(d.firstChild);
return df;
}
大概的原理都明白，比较困惑的是为什么要用 document.createDocumentFragment 呢？
后来在网上搜索了一下相关资源才知道，document.createDocumentFragment 是用来创建文档碎片的。
当我们需要大量 appendChild 页面元素时，可以先将这些元素 appendChild 进document.createDocumentFragment。
然后只需 appendChild 文档碎片到页面就可以了。这样就不用多次刷新页面达到性能优化的目的。上面那个代码我觉得用到文档碎片是多余的。
相关文章
这篇文章主要帮助大家轻松掌握JavaScript代理模式，什么是代理模式？代理的用途，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要为大家介绍了js 实现div拖拽拉伸完整示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要给大家总结了Javascript中常用的检测方法，通过这些总结的方法相信对大家学习或者使用Javascript能有所帮助，有需要的朋友们下面来一起看看吧。2016-10-10
这篇文章主要介绍了Bootstrap3学习笔记(三)之表格的相关资料,需要的朋友可以参考下2016-05-05
下面小编就为大家带来一篇JS时间控制实现动态效果的实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要为大家详细解析了bootstrap下拉菜单使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
本文主要对自动生成博客目录的具体实现方法进行介绍，需要的朋友可以看看2016-12-12
这篇文章主要给大家汇总介绍了javascript实现跨域的方法的相关资料,需要的朋友可以参考下2015-06-06
本文介绍了如何快速定位SQL性能问题的方法,包括找出执行时间最长的SQL、同类型并发SQL、阻塞和被阻塞SQL、锁等待和死锁,以及慢日志分析,需要的的朋友一起看看吧2017-04-04
动态加载JS文件的三种方法2013-11-11
最新评论