× 目录 [1]特征 [2]作用 前面的话 在所有节点类型中,只有文档片段节点DocumentFragment在文档中没有对应的标记.DOM规定文档片段(document fragment)是一种“轻量级”的文档,可以包含和控制节点,但不会像完整的文档那样占用额外的资源 特征 创建文档片段,要使用document.createDocumentFragment()方法.文档片段继承了Node的所有方法,通常用于执行那些针对文档的DOM操作 文档片段节点的三个node属性——nodeType.nod…

Text类型 文本节点由Text类型表示,包含的是可以照字面解释的纯文本内容.Text节点具有以下特征: nodeType的值为3 nodeName的值为"text" nodeValue的值为节点所包含的文本 parentNode的值为一个Element 没有子节点 可以通过nodeValue属性或者data属性访问Text节点中所包含的文本.使用下列方法可以操作节点中的文本: appendData(text):将text添加到节点的末尾. deleteData(offset,coun…

DocumentFragment 对象 DocumentFragment 接口表示文档的一部分(或一段).更确切地说,它表示一个或多个邻接的 Document 节点和它们的所有子孙节点. DocumentFragment 节点不属于文档树,继承的 parentNode 属性总是 null. 不过它有一种特殊的行为,该行为使得它非常有用,即当请求把一个 DocumentFragment 节点插入文档树时,插入的不是 DocumentFragment 自身,而是它的所有子孙节点.这使得 Docume…

如果有一个列表页,页面结构是外面一个BODY, 里面有一万个子DIV,每个DIV里面有一些文字,这些文字都不相同.需求是,点击一个DIV,要求弹个alert框,将DIV里的文字显示出来.你会怎么做. 30%的人会用JQuery来绑事件,认为看着简洁,应该效率高,如:$("body>div").click(……)  ,有20%的人会写原生的语句来遍历,给每个DIV添加点击事件,有10%的人回答,在页面滚动时,存下页面滚动的高度,在点击时,获取触发点在屏幕的Y坐标,将Y的坐标和页面滚…

一.前言 最近项目不是很忙,所以去看了下之前总想整理的重汇和回流的相关资料,关于回流优化,提到了DocumentFragment的使用,这个对象在3年前我记得是有看过的,但是一直没深入了解过,所以这里做个整理.后面会把重汇,回流也做个整理,不鸽. 二.DocumentFragment对象是什么? MDN解释: DocumentFragment 表示一个没有父级文件的最小文档对象.它被当做一个轻量版的 Document 使用,用于存储已排好版的或尚未打理好格式的XML片段.最大的区别是因为Docu…

DocumentFragment 节点 代表一个文档的片段,本身就是一个完整的 DOM 树形结构. 它没有父节点,.parentNode 返回 null 可以插入任意数量的子节点. 不属于当前文档,操作 DocumentFragment 节点,要比直接操作 DOM 树快得多 一般用于构建一个 DOM 结构,然后插入当前文档 创建一个空的 DocumentFragment 节点 var docFrag = document.createDocumentFragment(); // 等同于 var…

DocumentFragment类型 除开昨天我们了解的两种不常用的类型之外 今天我们要介绍的两种类型可以说使用频率不输于前面最常用的几种元素类型 首先就是DocumentFragment类型 有些小伙伴可能没有听说过这个类型,但是这个类型在前端性能优化方面有着举足轻重的作用 应该是仅次于VirtualDOM(虚拟节点技术)的 那么为什么大家对这种类型没有太多的感触呢? 因为只有这种类型没有对应的DOM标记,也就是说没法通过解析页面代码获得 书中对该类型的定义如下: 是一种轻量级文档,可以包含和…

一般动态创建html元素都是创建好了直接appendChild()上去,但是如果要添加大量的元素还用这个方法的话就会导致大量的重绘以及回流,所以需要一个'缓存区'来保存创建的节点,然后再一次性添加到父节点中.这时候DocumentFragment对象就派上用场了. 看下w3c的官方说明: DocumentFragment 节点不属于文档树,继承的 parentNode 属性总是 null. 不过它有一种特殊的行为,该行为使得它非常有用,即当请求把一个 DocumentFragment 节点插入文…

文章中转站: DocumentFragment对象 createDocumentFragment()用法总结 深入理解DOM节点类型第四篇——文档片段节点DocumentFragment…

理解 DocumentFragment 含义:创建文档片段,它继承了Node的所有方法,对DOM操作性能非常好.创建文档片段 如下方法: var frag = document.createDocumentFragment(); 文档片段有三个node属性,nodeType, nodeName, nodeValue; 他们的值分别是 11, '#document-fragment', null, 文档片段节点没有父节点parentNode. 如下代码演示: var frag = document…