文档章节

js DocumentFragment 文档碎片

appleZ
 appleZ
发布于 2015/04/14 11:24
字数 642
阅读 30
收藏 0

在所有节点类型中,只有DocumentFragment在文档中没有对应的标记。DOM规定文档片段(documentfragment)是一种”轻量级“的文档,可以包含和控制节点,但不会像完整的文档那样占用额外资源。DocumentFragment节点具有下列特征:

  • nodeType的值为11

  • nodeName的值为“#document-fragment”

  • nodeValue的值为null

  • parentNode的值为null

  • 子节点可以是Element、ProcessingInstruction、Comment、Text、CDATASection或EntityReference

虽然不能把文档片段直接添加到文档中,但可以将它作为一个“仓库”来使用,即可以在里面保存将来可能会添加到文档中的节点。要创建文档片段,可以使用document.createDocumentFragment()方法,如下所示:

var fragment = document.createDocumentFragment();

文档片段继承了Node的所有方法,通常用于执行那些针对文档的DOM操作。如果将文档中的节点添加到文档片段中,就会从文档树中再看到该节点。添加到文档片段中的新节点同样也不属于文档树。可以通过appendChild()或insertBefore()将文档片段中内容添加到文档中。在将文档片段作为参数传递给这两个方法时,实际上只会将文档片段的所有子节点添加到相应的位置上;文档片段本身永远不会成为文档树的一部分。来看下面的HTML示例代码:

<ul id="myList"></ul>

假设我们想为这个<ul>元素添加3个列表项。如果逐个地添加列表项,将会导致浏览器反复渲染(呈现)新信息。为避免这个问题,可以像下面这样使用一个文档片段来保存创建的列表项,然后一次性将它们添加到文档中:

var fragment = document.createDocumentFragment();
var ul = document.getElementById("myList");
var li = null;
for (var i = 0; i < 3; i++) {
    li = document.createElement("li");    
    li.appendChild(document.createTextNode("Item" + (i + 1)));    
    fragment.appendChild(li);
}
ul.appendChild(fragment);

在这个例子中,我们先创建一个文档片段并取得了对<ul>元素的引用。然后,通过for循环创建3个列表项,并通过文本表示它们的顺序。为此,需要分别创建<li>元素、创建文本节点,在把文本节点添加到<li>元素。接着使用appendChild将<li>元素添加到文档片段中。循环结束后,再调用appendChild()并传入文档片段,将所有列表项添加到<ul>元素中。此时,文档片段的所有子节点被删除并转移到了<ul>元素中。

本文转载自:http://www.w3cmm.com/dom/documentfragment.html

共有 人打赏支持
上一篇: css button 圆角
下一篇: js cookie片段记录
appleZ
粉丝 1
博文 38
码字总数 9774
作品 0
深圳
私信 提问
JavaScriptTips使用DocumentFragment加快DOM渲染速度

大家在使用JavaScript的时候,DOM操作是最平常不过的了, 随着Web前端技术的发展,我们越来越多的使用JS来操作DOM元素,比如通过ajax请求获取到数据,然后更新页面上的元素,一般情况下,这种...

fuck_zhou
2011/12/20
0
0
JavaScript DocumentFragment(文档碎片)

JavaScript DocumentFragment(文档碎片) documentFragment对象:无父窗口的文档对象(或者叫文档碎片) 作用:javascript在操作DOM时都会重新加载整个文档的DOM为了减少DOM操作可以在操作DOM...

freedonn
2014/10/18
69
0
javascript之DOM操作

一、document.getElementById() 根据Id获取元素节点 <div id="div1"> <p id="p1"> 我是第一个P</p> <p id="p2"> 我是第二个P</p> </div> window.onload = function () { var str = document......

烹饪师
2015/08/19
0
0
前端面试之JavaScript

1. JS基本的数据类型和引用类型 基本数据类型:number、string、null、undefined、boolean、symbol -- 栈 引用数据类型:object、array、function -- 堆 两种数据类型存储位置不同 原始数据类...

大灰狼的小绵羊哥哥
08/27
0
0
将HTML字符转换为DOM节点并动态添加到文档中

将HTML字符转换为DOM节点并动态添加到文档中 将字符串动态转换为DOM节点,在开发中经常遇到,尤其在模板引擎中更是不可或缺的技术。 字符串转换为DOM节点本身并不难,本篇文章主要涉及两个...

玄魂
08/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

WebSocketdemo

WebSocket是html5提供的一种在单个tcp连接上进行全双工通讯的协议。 Http协议是无状态、无连接的、单向的应用层协议,采用了请求响应模型,通信请求智能有客户端发起,服务端对请求做出应答处...

qiang123
16分钟前
0
0
谷歌推迟公布Google+漏洞遭参议员不满

参议院商务委员会主席约翰·图恩和另外两位参议员杰瑞·莫兰和罗杰·维克发出信函,要求谷歌解释推迟披露此问题的原因。信中称:“谷歌如果要保持或重获用户对其服务的信任,就必须在公众和立...

linuxCool
23分钟前
0
0
最重要的是做什么,而不是怎么做。

最重要的是做什么,而不是怎么做。 做什么是战略,怎么做是战术。将军下令说,天黑前拿下这座山头,这是战略。手下的士兵可以不知道为什么要拿下这座山头,还非得是天黑之前,但士兵必须知道...

我是菜鸟我骄傲
今天
6
0
w, vmstat, top, sar, nload命令查看系统状态信息

w/uptime 查看系统负载 cat /proc/cpuinfo 查看cpu核数 vmstat 监控系统状态,用法 vmstat 1,关键的几列: r, b, swpd, si, so, bi, bo, us, wa top 查看进程使用资源情况 top -c 显示详细的...

野雪球
今天
2
0
小白创建一个spring boot项目

进入 https://start.spring.io/

lilugirl
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部