zoukankan      html  css  js  c++  java
  • [DOM][document][进阶]DocumentFragment, document.createDocumentFragment()

    vue源码学习双向数据绑定原理前置知识

    DocumentFragment

    DocumentFragment(文档片段)是12中节点类型之一(《JavaScript高级程序设计》第275——276页)
    DOM规定文档片段是一种“轻量级”的文档,可以包含和控制节点,但不会像完整的文档那样占用额外资源。
    虽然不能把文档片段直接添加到文档中,但可以将它作为一个“仓库”来使用,即可以再里面保存将来可能会添加到文档中的节点。
    创建文档片段,使用document.createDocumentFragment()方法
    DocumentFragment的变化不会触发DOM树的重新渲染,且不会导致性能等问题。

    文档片段继承了Node的所有方法,通常用于执行那些针对文档的DOM操作。如果将文档中的节点添加到文档片段中,就会从文档树中移除该节点,也不会从浏览器中再看到该节点。
    添加到文档片段中的新节点同样也不属于文档树。可以通过appendChild()或insertBefore()将文档片段中的内容添加到文档中。在将文档片段作为参数传递给这两个方法时,
    实际上只会将文档片段的所有子节点添加到相应位置上;
    文档片段本身永远不会成文档树的一部分。

    <ul id="myList"></ul>
    
     var fragment = document.createDocumentFragment();
     var ul = document.getElementById('myList');
     var browsers = ['Chrome','FireFox','Opera','Safari','Internet Explorer'];
     browsers.forEach(function(browser) {
        var li = document.createElement('li');
        li.textContent = browser;
        fragment.appendChild(li);
     })
     ul.appendChild(fragment)
    
    坚持,坚持,坚持。再坚持坚持!
  • 相关阅读:
    完美世界经典版本881外挂
    ShowModal 动态创建窗体和释放窗体
    HTML 颜色代码大全
    padding margin border 的四值顺序
    三 C# Socket通信 窗体控件与多线程
    Java解压缩Zip 文件
    八 C# Socket通信 通信协议设计
    CSS+DIV实现鼠标经过背景变色
    七 C# Socket通信 阻塞性线程的快速终止
    二 C# Socket通信模式
  • 原文地址:https://www.cnblogs.com/danker/p/12573415.html
Copyright © 2011-2022 走看看