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>
最新文章
- BCD码和十六进制，十进制转换
- ZeroMQ接口函数之 ：zmq_plain - 明文认证
- VGA逐行扫描控制器的Verilog建模
- Linq ExecuteQuery，ExecuteCommand
- 简明易懂的call apply
- css3旋转小三角
- ACM——A + B Problem (2)
- 写漂亮C#代码的小技巧
- OpenMP 并行化处理测试
- shape和selector是Android UI设计中经常用到的
- C++ tree（1）
- [转]How to compile GDB for iOS!
- xamarin mac 基础知识 之 界面
- python替换残缺的多域名图片网址
- #2 Python面向对象（一）
- Linux网站运维工程师基础大纲
- Matlab实现《追光者》简谱
- 【Dubbo&&Zookeeper】2、 windows平台dubbo-admin管理平台搭建
- 散列之HashTable学习
- Django_重装系统后无法使用 sqlite 数据库报错：com.intellij.execution.ExecutionException: Exception in thread "main" java.lang.ClassNotFoundException: org.sqlite.JDBC