• 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>
  • 相关阅读:
    .NET中使用嵌入的资源
    C#操作注册表
    .Net中大数加减乘除运算
    CYQ.Data 轻量数据层之路 V4.5 版本发布[更好的使用体验,更优的缓存机制]
    关于性能比较的应用误区
    秋色园QBlog技术原理解析:性能优化篇:打印页面SQL,全局的SQL语句优化(十三)
    CYQ.DBImport 数据库反向工程及批量导数据库工具 V1.0 发布
    框架设计之菜鸟漫漫江湖路系列 一:菜鸟入门
    MySql折腾小记二:text/blog类型不允许设置默认值,不允许存在两个CURRENT_TIMESTAMP
    CYQ.Data.Xml XmlHelper 助你更方便快捷的操作Xml/Html
  • 原文地址:https://www.cnblogs.com/jokes/p/9488509.html
Copyright © 2020-2023  润新知