zoukankan      html  css  js  c++  java
  • documentFragment深入理解

    documentFragment是一个保存多个element的容器对象(保存在内存)当更新其中的一个或者多个element时,页面不会更新。只有当documentFragment容器中保存的所有element更新后再将其插入到页面中才能更新页面。
    documentFragment用来批量更新
    列如将ul里面的li取出放到documentFragment,更新完毕后再将其插入到ul,一共有以下四步骤:

    1. 创建documentFragment对象fragment
    2. 取出ul中的所有子节点并保存到fragment
    3. 更新fragment中的所有节点(li的内容)
    4. 将fragment插入到ul
    //初始显示test1
    <div id="test">
            <li>test1</li>
            <li>test1</li>
            <li>test1</li>
        </div>
    
    const ul = document.getElementById('test')
    // 创建fragment对象
    const fragment = document.createDocumentFragment()
    //  取出ul中的所有子节点并保存到fragment
    let child;
    while(child=ul.firstChild) {
      fragment.appendChild(child)
    }
    //更新fragment中的所有节点(li的内容)
    Array.prototype.slice.call(fragment.childNodes).forEach(node => {
      if (node.nodeType===1) {//取得元素节点
        node.textContent = 'test2' //重新赋值为test2
      }
    })
    // 将fragment插入到ul
    ul.appendChild(fragment)
    

    在fragment插入到ul之前页面不会更新,documentFragment用来批量更新元素

  • 相关阅读:
    wxpython快速入门
    python核心编程 第四章 和第五章
    python核心编程 第三章
    python核心编程 第二章 快速入门
    Nginx 使用札记
    PHP 函数总结
    node.js安装部署
    linux
    在Linux上安装Git
    php超级全局变量
  • 原文地址:https://www.cnblogs.com/yuanchao-blog/p/10847417.html
Copyright © 2011-2022 走看看