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>

DocumentFragment类型的更多相关文章

  1. DOM-Text类型、Comment类型、CDATASection类型、DocumentType类型、DocumentFragment类型、Attr类型

    Text类型 文本节点由Text类型表示,包含的是可以照字面解释的纯文本内容.Text节点具有以下特征: nodeType的值为3 nodeName的值为"text" nodeVa ...

  2. Javascript高级编程学习笔记（41）—— DOM（7）DocumentFragment类型

    DocumentFragment类型 除开昨天我们了解的两种不常用的类型之外 今天我们要介绍的两种类型可以说使用频率不输于前面最常用的几种元素类型 首先就是DocumentFragment类型 有些小 ...

  3. js中迭代元素特性与DOM中的DocumentFragment类型 笔记

    JS中迭代元素特性 在需要将DOM结构序列化为XML或者HTML字符串时,多数都会涉及遍历元素的特性,这个时候attributes属性就可以派上用场. 以下代码展示了如何迭代元素的每一个特性,然后将他 ...

  4. 全栈JavaScript之路（十）学习 DocumentFragment 类型 节点

    DocumentFragment 类型节点,代表一个文档片段,是一种轻量级的'文档' 对象.能够包括其他类型节点,并有能力訪问.操作当中的节点,可是在文档中没有文档标记,相当于是一个页面不可见的容器. ...

  5. 从原型链看DOM－－Comment,CDATASection,DocumentType,DocumentFragment,Attr类型

    这次总结的是剩下的这些DOM类型节点,可能你见过却不经常使用但是了解一下总是好的,可以加深对DOM体系的整体理解~.本篇要介绍的是Comment,CDATASection,DocumentType,D ...

  6. 从原型链看DOM－－Node类型

    前言: 本系列从原型,原型链,属性类型等方面下手学习了DOM文档对象模型,旨在弄清我们在DOM中常用的每一个属性和方法都清楚它从哪里来要到哪里做什么事,这样对于理解代码有一定启发.全靠自己在总结中摸索 ...

  7. 文档碎片DocumentFragment

    文档碎片是什么? 参考标准的描述,DocumentFragment是一个轻量级的文档对象,能够提取部分文档的树或创建一个新的文档片段,换句话说有文档缓存的作用. createDocumentFragm ...

  8. 10.1.5 Comment类型【JavaScript高级程序设计第三版】

    注释在DOM中是通过Comment 类型来表示的.Comment 节点具有下列特征: nodeType 的值为8: nodeName 的值为"#comment": nodeValu ...

  9. js原生dom方法总结

    1.document document方法getElementById (Node)返回指定节点的引用getElementsByTagName (NodeList)返回文档中所有匹配元素的集合quer ...

随机推荐

  1. android屏蔽BACK键、HOME键和多任务键

    HOME: @Overridepublic void onAttachedToWindow() { System.out.println("Page01 -->onAttachedTo ...

  2. 安装后没有IP

    修改  /etc/sysconfig/network-scripts/ifcfg-eth0 改为yes

  3. python 字符串 列表 字典 常用方法

    今天学习内容如下: 1.学习昨天练习题目的解题新方法 #1.使用while循环输入 1 2 3 4 5 6 8 9 10 ''' count = 0 while count < 10: coun ...

  4. js全局作用域

    全局作用域 不在任何函数内定义的变量就具有全局作用域.实际上,JavaScript默认有一个全局对象window,全局作用域的变量实际上被绑定到window的一个属性: var course = 'L ...

  5. static ，const

    函数原型作用域:作用范围为函数形参表范围,起始于“(”,结束于“)”,这是声明 定义是属于局部作用域,所以声明的时候不写形参名字也可以 类作用域:包含类体及在类外实现的本类成员函数的函数体 静态生存期 ...

  6. hdu 1539 & poj 1416 某某公司

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1539 大意是输入n和m,把m按顺序拆分成若干个数,问这些数和的在小于n的前提下最大为多少 注意必须m的 ...

  7. NGS基础 - 高通量测序原理

    NGS基础 - 高通量测序原理 原创: 赑屃 生信宝典 2017-07-23 NGS系列文章包括NGS基础.转录组分析.ChIP-seq分析.DNA甲基化分析.重测序分析五部分内容. NGS基础系列文 ...

  8. Notification 通知传值

    通知 是在跳转控制器之间常用的传值代理方式,除了代理模式,通知更方便.便捷,一个简单的Demo实现通知的跳转传值.       输入所要发送的信息 ,同时将label的值通过button方法调用传递, ...

  9. LibreOJ #6008. 「网络流 24 题」餐巾计划 最小费用最大流 建图

    #6008. 「网络流 24 题」餐巾计划 内存限制:256 MiB时间限制:1000 ms标准输入输出 题目类型:传统评测方式:文本比较 上传者: 匿名 提交提交记录统计讨论测试数据   题目描述 ...

  10. 关于出现“对不起，您安装的不是正版应用...”的解决方法

    由于Discuz X版本增加了对插件的版本检测,在安装时,可能会出现:"对不起,您安装的不是正版应用,安装程序无法继续执行"的提示,如下图: 唱唱反调小编在此给大家分享解决方法: ...