简介:JavaScript DOM 操作:什么是文档碎片(Document Fragment)?有什么作用? 文档碎片(Document Fragment)是一种在 DOM 操作中用于提高性能的技术。它是一个虚拟的 DOM 节点容器,可以在其中存储多个 DOM 元素,但不会直接在页面中渲染显示。文档碎片可以用来在内存中构建一组 DOM 元素,然后一次性将它们添加到文档中,
DocumentFragment 节点不属于文档树,继承的 parentNode 属性总是 null。不过它有一种特殊的行为,该行为使得它非常有用,即当请求把一个 DocumentFragment 节点插入文档树时,插入的不是 DocumentFragment 自身,而是它的所有子孙节点。这使得 DocumentFragment 成了有用的占位符,暂时存放那些一次插入文档的节点。它还有利于...
DocumentFragment节点 DocumentFragment节点代表一个文档的片段,本身就是一个完整的DOM树形结构 DocumentFragment节点代表一个文档的片段,本身就是一个完整的DOM树形结构。它没有父节点,parentNode返回null,但是可以插入任意数量的子节点。它不属于当前文档,操作DocumentFragment节点,要比直接操作DOM树快得多。 var docFrag =...
只能被fragment自身的document获取到 普通的dom节点<templateid="template">template标签内部的内容跳过了渲染,所以在页面无法展示出来</template>consttemplate=document.querySelector("#template");console.log('fragment可以获取自身子节点===>',template.content.querySelector('p'))console.log('外部document无法获取...
2、nodeName:"#document-fragment" 3、nodeValue:null 4、parentNode:null 这类节点说白了就是不完整的文档 当然也不属于当前的页面的文档 所以通常用于暂存页面的节点变动,比如有时候我们可能需要循环添加一些DOM内容 但是每一次循环浏览器都会进行页面的重排、重绘等,以此来展现变更的内容 ...
在之前的文章JavaScript DOM 1里里面曾解释过各种概念之前的关系,当时用了一张图,如下图: 从这张图里面,我们可以看到 DocumentFragment 和 Document 是兄弟关系,都直接继承自Node类。 DocumentFragment是一种十分特殊的Node,它和Document一样没有parentNode. 它可以有后代节点,也可以使用appendChild()这类的方法。它的...
DocumentFragment节点对象没有自己的属性和方法,全部继承自Node节点和ParentNode接口。也就是说,DocumentFragment节点比Node节点多出以下四个属性。children:返回一个动态的HTMLCollection集合对象,包括当前DocumentFragment对象的所有子元素节点。 firstElementChild:返回当前DocumentFragment对象的第一个子元素节点,如果没有则返回...
探讨document fragment在提升JavaScript动态添加DOM性能方面的实际效果。有观点认为，由于JS不会阻塞UI渲染，故使用document fragment能提高性能。然而，事实并非如此简单。在节点插入到真实文档前，只有部分操作在document fragment中执行，这使得它在处理某些特定任务时显得更快。举例来说，当元素被插入到文档时，...
全栈JavaScript之路(十)学习 DocumentFragment 类型 节点,DocumentFragment类型节点,代表一个文档片段,是一种轻量级的‘文档’对象。能够包括其他类型节点,并有能力訪问、操作当中的节点,可是在文档中没有文档标记,相当于是一个页面不可见的容器。其构造函数为,func
script type="text/javascript"> document.getElementById("demo").onclick=function(){ var divFragment=document.createDocumentFragment(), div1=document.createElement("div"), div2=document.createElement("div"), div3=document.createElement("div"); ...