js DocumentFragment 文档碎片
2015-04-14 00:00
465 查看
摘要: js DocumentFragment 文档碎片
在所有节点类型中,只有DocumentFragment在文档中没有对应的标记。DOM规定文档片段(documentfragment)是一种”轻量级“的文档,可以包含和控制节点,但不会像完整的文档那样占用额外资源。DocumentFragment节点具有下列特征:
nodeType的值为11
nodeName的值为“#document-fragment”
nodeValue的值为null
parentNode的值为null
子节点可以是Element、ProcessingInstruction、Comment、Text、CDATASection或EntityReference
虽然不能把文档片段直接添加到文档中,但可以将它作为一个“仓库”来使用,即可以在里面保存将来可能会添加到文档中的节点。要创建文档片段,可以使用document.createDocumentFragment()方法,如下所示:
文档片段继承了Node的所有方法,通常用于执行那些针对文档的DOM操作。如果将文档中的节点添加到文档片段中,就会从文档树中再看到该节点。添加到文档片段中的新节点同样也不属于文档树。可以通过appendChild()或insertBefore()将文档片段中内容添加到文档中。在将文档片段作为参数传递给这两个方法时,实际上只会将文档片段的所有子节点添加到相应的位置上;文档片段本身永远不会成为文档树的一部分。来看下面的HTML示例代码:
假设我们想为这个<ul>元素添加3个列表项。如果逐个地添加列表项,将会导致浏览器反复渲染(呈现)新信息。为避免这个问题,可以像下面这样使用一个文档片段来保存创建的列表项,然后一次性将它们添加到文档中:
在这个例子中,我们先创建一个文档片段并取得了对<ul>元素的引用。然后,通过for循环创建3个列表项,并通过文本表示它们的顺序。为此,需要分别创建<li>元素、创建文本节点,在把文本节点添加到<li>元素。接着使用appendChild将<li>元素添加到文档片段中。循环结束后,再调用appendChild()并传入文档片段,将所有列表项添加到<ul>元素中。此时,文档片段的所有子节点被删除并转移到了<ul>元素中。
在所有节点类型中,只有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>元素中。
相关文章推荐
- JS性能优化之创建文档碎片(document.createDocumentFragment)
- JS性能优化之文档碎片-document.createDocumentFragment
- JS性能优化之创建文档碎片(document.createDocumentFragment)
- javascript Dom: documentFragment 文档碎片对象
- document.createDocumentFragment(文档碎片)
- 有关文档碎片(document fragment)的使用方法
- 简单了解文档碎片DocumentFragment的使用
- jquery源码解析(第2章之文档碎片DocumentFragment)
- JavaScript性能优化--创建文档碎片createDocumentFragment(转)
- JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
- JavaScript中的文档碎片DocumentFragment
- createDocumentFragment() 创建文档碎片节点
- 创建文档碎片节点createDocumentFragment()并显示
- 有关文档碎片(document fragment)的用法
- createDocumentFragment创建文档碎片节点
- JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
- Javascript DocumentFragment 文档片段
- week14---12月11日 JS内置对象——document文档对象、Dom对象
- js获取元素到文档区域document的(横向、纵向)坐标的两种方法
- js中的文档模式-document.compatMode