• DocumentFragment类型


    nodeType  11

    nodeName  #document-fragment

    nodeValue  NULL

    parentNode  null

    createdocumentfragment()方法创建了一虚拟的节点对象,节点对象包含所有属性和方法。

    当你想提取文档的一部分,改变,增加,或删除某些内容及插入到文档末尾可以使用createDocumentFragment() 方法。

    你也可以使用文档的文档对象来执行这些变化,但要防止文件结构被破坏,createDocumentFragment() 方法可以更安全改变文档的结构及节点。

     通俗说法:

    documentFragment()会创建一个文档片段也就是是一个接受元素的空壳,空壳并不在DOM树中,如果把片段添加到父级元素中,空壳并不会添加到DOM树中

    js常见的创建dom节点的方法有

    • createElement() 创建一个元素节点 => 接收参数为string类型的nodename
    • createTextNode() 创建一个文本节点 => 接收参数为string类型的text内容
    • createAttribute() 创建一个属性节点 => 接收参数为string类型的属性名称
    • createComment() 创建一个注释节点 => 接收参数为string类型的注释文本

    本文要说的createDocumentFragment()方法,则是用了创建一个虚拟的节点对象,或者说,是用来创建文档碎片节点。它可以包含各种类型的节点,在创建之初是空的。


    DocumentFragment节点不属于文档树,继承的parentNode属性总是null。它有一个很实用的特点,当请求把一个DocumentFragment节点插入文档树时,插入的不是DocumentFragment自身,而是它的所有子孙节点。这个特性使得DocumentFragment成了占位符,暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作。 
    另外,当需要添加多个dom元素时,如果先将这些元素添加到DocumentFragment中,再统一将DocumentFragment添加到页面,会减少页面渲染dom的次数,效率会明显提升。


    还有一个很重要的特性是,如果使用appendChid方法将原dom树中的节点添加到DocumentFragment中时,会删除原来的节点。

    实例:

    <body>
        <div>klkx</div>
        <script>
            var oDiv = document.getElementsByTagName('div')[0];
            var s1 = document.createDocumentFragment();
            s1.appendChild(oDiv);
            document.body.appendChild(s1);
        </script>
     </body>

    如果两个不同的父级元素同时添加一个documentFragment则第一个appendChild()方法的会被添加

    <body>
        <div>klkx1</div>
        <div>klkx2</div>
        <script>
            var aDiv = document.getElementsByTagName('div');
            var f1 = document.createDocumentFragment();
            var s1 = document.createElement('span');
            f1.appendChild(s1);
            s1.innerHTML = '就是好';
            aDiv[0].appendChild(f1);
            aDiv[1].appendChild(f1);
        </script>
     </body>
  • 相关阅读:
    SSH整合中,使用父action重构子类action类.(在父类中获取子类中的泛型对象)
    算法大神之路----排序(插入排序法)
    Redis的基本使用(基于maven和spring)
    算法大神之路----排序(选择排序法)
    exe4j 安装
    png转ico网站
    artTemplate/template.js模板将时间格式化为正常的日期
    artTemplate js模板引擎动态给html赋值
    IIS7的集成模式下如何让自定义的HttpModule不处理静态文件(.html .css .js .jpeg等)请求
    Windows Server2012 R2 安装.NET Framework 3.5失败解决方法
  • 原文地址:https://www.cnblogs.com/jokes/p/9488509.html
Copyright © 2020-2023  润新知