zoukankan      html  css  js  c++  java
  • (89)Wangdao.com第二十二天_JavaScript DocumentFragment 节点

    DocumentFragment 节点

    代表一个文档的片段,本身就是一个完整的 DOM 树形结构。

    没有父节点,.parentNode 返回 null

    可以插入任意数量的子节点。

    不属于当前文档,操作 DocumentFragment 节点,要比直接操作 DOM 树快得多

    一般用于构建一个 DOM 结构,然后插入当前文档

     

    • 创建一个空的 DocumentFragment 节点

     

      • var docFrag = document.createDocumentFragment();

    // 等同于

      • var docFrag = new DocumentFragment();

     

     

    
    
    

     

    • 然后再使用其他 DOM 方法,向其添加子节点
      • var li = document.createElement('li');
        li.textContent = 'Hello World';
        docFrag.appendChild(li);

     

    • 最后插入当前文档
      • document.querySelector('ul').appendChild(docFrag);

     

      • 注意:DocumentFragment 节点本身不能被插入当前文档
        • 当它作为 appendChild()、insertBefore()、replaceChild() 等方法的参数时
          • 是它的所有子节点插入当前文档,而不是它自身
          • 一旦 DocumentFragment 节点被添加进当前文档,它自身就变成了空节点(textContent属性为空字符串),可以被再次使用。

     

      • 如果想要保存 DocumentFragment 节点的内容,可以使用 cloneNode 方法
        • document.queryselector('ul').appendChild(docFrag.cloneNode(true));

     

      • 实例
        • // 反转一个指定节点的所有子节点的顺序
          function reverse(ele) {
              var docFrag = document.createDocumentFragment();
              
              while(ele.lastChild){
                  docFrag.appendChild(ele.lastChild);
              }
              ele.appendChild(docFrag);
          }

     

    --------小尾巴 ________一个人欣赏-最后一朵颜色的消逝-忠诚于我的是·一颗叫做野的心.决不受人奴役.怒火中生的那一刻·终将结束...
  • 相关阅读:
    z470 装黑苹果 10.92
    Ubuntu 14.04安装Chromium浏览器并添加Flash插件Pepper Flash Player
    Jira 6.0.3 安装与破解
    Scrumworks乱码
    升级 CentOS git 1.7.1 到 1.7.12
    函数细说及匿名函数
    第四章—变量,作用域和内存问题(三)
    第四章—变量,作用域和内存问题(二)
    CSS-DOM的小知识(一)
    第三章——基本概念(三)
  • 原文地址:https://www.cnblogs.com/tianxiaxuange/p/9888883.html
Copyright © 2011-2022 走看看