十年专注于品牌网站建设 十余年专注于网站建设_小程序开发_APP开发,低调、敢创新、有情怀!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

DocumentFragment类型使用方法介绍

百恒网络 2016-11-26 5071

DocumentFragment类型也是用得比较少的类型之一,但我们还是有必要介绍下其使用方法,以便在开发过程中遇到了该类型可以查看其使用方法,在所有节点类型中,只有DocumentFragment在文档中没有对应的标记。DOM规定文档片段 ( document fragment)是一种“轻量级"的文档,可以包含和控制节点,但不会像完整的文档那样占用额外的资源。DocumentFragment节点具有下列特征:

◎nodeType的值为11;

◎nodeName的值为"#document-fragment";

◎nodeValue的值为null;

◎parentNode的值为null;

◎子节点可以是Element、Proces singlns truc tion、comment、Text、CDATASection或EntityReference。

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

方法,如下所示:

var fragment=document .createDocumentFragment();

文档片段继承了Node的所有方法,通常用于执行那些针对文档的DOM操作。如果将文档中的节点添加到文档片段中,就会从文档树中移除该节点,也不会从浏览器中再看到该节点。添加到文档

片段中的新节点同样也不属于文档树。可以通过appendChild()或insertBefore()将文档片段中内容添加到文档中。在将文档片段作为参数传递给这两个方法时,实际上只会将文档片段的所有子节点

添加到相应位置上;文档片段本身永远不会成为文档树的一部分。来看下面的HTML示例代码:

假设我们想为这个

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

一次性将它们添加到文档中:

var fragment=document.createDocumentFragment();

var ul=document.getElementByld("myList");

var li=null;

for (var i=0;i<3; i++){

li=document.createElement("li");

li. appendChild( document. createTextNode("Item"+(i+l)));

ragment. appendChild(li);

}

ul. appendChild(fragment);

在这个例子中,我们先创建一个文档片段并取得了对

元素的引用。然后,通过for循环创建 3个列表项,并通过文本表示它们的顺序。为此,需要分别创建

元素、创建文本节点,再把文本

节点添加到

元素。接着使用appendChild()将

元素添加到文档片段中。循环结束后,再调用appendChild()并传人文档片段,将所有列表项添加到

元素中。此时,文档片段的所有子节点都被删除并转移到了

元素中。

本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广技人员有所帮助。原创文章出自:南昌网站建设公司-百恒网络http://www.jxbh.cn/website/index.html/如转载请注明出处!


400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
售后服务 售后服务
 
备案专线 备案专线
 
×