document.createDocumentFragment document.createDocumentFragment()方法创建一个新空白的DocumentFragment对象. DocumentFragments是DOM节点.它们不是主DOM树的一部分.通常的用例是创建文档片段,将元素附加到文档片段,然后将文档片段附加到DOM树.在DOM树中,文档片段被其所有的子元素代替. 因为文档片段存在于内存中,并不在DOM树中,所以将子元素插入到文档片段时不会引起页面回流(reflow)(对元…

var _div = document.createElement("div"), //创建节点 txt1 = document.createTextNode("123"), //创建文本 // _b = document.createElement("b"), txt2 = document.createTextNode("456"); _div.className = "txt"; // _b.appe…

document.createDocumentFragment  用于创建文档对象,创建好的对象存在于内存中(不会引起回流,对元素位置和几何上的运算),不是附着在DOM树上,所以有更好的性能 可将该文档片段插入DOM树中, 例子: var element = document.getElementById('ul'); // assuming ul exists var fragment = document.createDocumentFragment(); var browsers = ['…

var aqiData = [ ["北京", 90], ["上海", 50], ["福州", 10], ["广州", 50], ["成都", 90], ["西安", 100]]; (function () { var box = aqiData.filter(function(arr){ return arr[1]>60 }).sort(function(num1,num2){ r…

讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么.         在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新,一条条循环插入也会运行很好,也是我们常用的方法.代码如下: for(var i=0;i<5;i++) { var op = document.createElement("span"); var oText = document.createTextNode(i); op.appen…

      讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么.         在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新,一条条循环插入也会运行很好,也是我们常用的方法.代码如下:     for(var i=0;i<5;i++) { var op = document.createElement("span"); var oText = document.createTextNode(i)…

一.关于节点 1.节点树状图 document>documentElement>body>tagName 2.节点类型 元素节点(标签).文本节点(文本).属性节点(标签属性) 3.document的属性nodeType的返回值是数字: 1:元素节点:2.属性节点:3.文本节点 4.获取节点的方法: document.getElementById() document.getElementsByClassName() document.getElementsByTagName() doc…

documentFragment 是一個無父對象的document對象他支持以下DOM2方法: appendChild, cloneNode, hasAttributes, hasChildNodes, insertBefore, normalize, removeChild, replaceChild. 也支持以下DOM2屬性: attributes, childNodes, firstChild, lastChild, localName, namespaceURI, nextSibling…

对于循环批量操作页面的DOM有很大帮助!利用文档碎片处理,然后一次性append,并且使用原生的javascript语句操作 document.createDocumentFragment()说白了就是为了节约使用DOM.每次JavaScript对DOM的操作都会 改变页面的变现,并重新刷新整个页面,从而消耗了大量的时间.为解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片的内容一次 性添加到document中. 这是我写的一个简单的测试页面: <!DOCTYPE htm…

基本概念 document.createDocumentFragment 方法会创建一个 DocumentFragment 对象,该对象是一个存在于 DOM 树之外的 DOM 节点.它有一个非常有用的特性:当 DocumentFragment 节点被插入 DOM 树时,插入 DOM 树的其实并不是 DocumentFragment 节点,而是它的所有子孙节点(即 DocumentFragment 节点本身会自动消失).这个特性使其常被拿来当作 DOM 操作的 buffer,即当有大量 DOM 节…