【DocumentFragment对象】的更多相关文章

页面优化，DocumentFragment对象详解

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

DocumentFragment对象

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

浏览器Range,Selection等选中文本对象

Range对象 Range 对象表示文档的连续范围区域,如用户在浏览器窗口中用鼠标拖动选中的区域. 最常见的Range是用户文本选择范围(user text selection).当用户选择了页面上的某一段文字后,你就可以把这个选择转为Range.当然,你也可以直接用程序定义Range. 如果一个实现支持 Range 模块,那么document就定义了createRange()方法调用它可创建新的 Range 对象. 注意:IE 定义了不兼容的 Document.createRange() 方法…

高效的插入子节点DocumentFragment

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

HTML DOM Document 对象

HTML DOM Document 对象 HTML DOM 节点 在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点: 文档是一个文档. 所有的HTML元素都是元素节点. 所有 HTML 属性都是属性节点. 文本插入到 HTML 元素是文本节点.are text nodes. 注释是注释节点. Document 对象 当浏览器载入 HTML 文档, 它就会成为 document 对象. document 对象是HTML文档的根节点与所有其他节点(元…

HTML5中的Range对象的研究

一:Range对象的概念 Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下: var  range = document.createRange(); 在html5中,每一个浏览器窗口及每一个窗口中都有一个selection对象,代表用户鼠标在页面中所选取的区域,(注意:经过测试IE9以下的浏览器不支持Selection对象), 可以通过如下语句创建selection对象: var  selection =…

HTML5中的Range对象的研究（转载）

一:Range对象的概念 Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下: var  range = document.createRange(); 在html5中,每一个浏览器窗口及每一个窗口中都有一个selection对象,代表用户鼠标在页面中所选取的区域,(注意:经过测试IE9以下的浏览器不支持Selection对象), 可以通过如下语句创建selection对象: var  selection =…

[H5]range对象的createRange方法

range对象的extractContents()方法: extractContents() 方法删除文档内容,并以 DocumentFragment 对象的形式返回它; DocumentFragment配合range对象:相当于剪切.复制.粘贴其子孙节点 <body> <div id="div1" style="background: greenyellow;width: 200px; height:100px;">这里有一段文字</…

JavaScript -- 时光流逝（十一）：DOM -- Document 对象

JavaScript -- 知识点回顾篇(十一):DOM -- Document 对象 (1) document.activeElement: 返回文档中当前获得焦点的元素. <!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> function my_activeElement() { va…

虚拟节点操作——DocumentFragment

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