DOM启蒙：DocumentFragment节点

1.DocumentFragment对象概览

     把DocumentFragment看做一个空的文档模板，行为与实时DOM树相仿，但仅在内存中存在，并且它的子节点可以很简单地在内存中操作，而后附加到实时DOM。

 

2.

• createDocumentFragment()：

            创建DocumentFragment

            使用文档片段在内存中创建节点结构，注入该文档片段到实时节点时，是极其高效的。

            使用文档片段与直接在内存中创建（createElement）的区别：

                a）文档片段可以包含任意类型的节点。而元素可能不行

                b）附加文档片段到DOM时，它自身并不会被添加。这与附加元素相反，元素节点会跟附加操作一并添加到DOM中。

                c）当文档片段被附加DOM中时，它从文档片段传输内容至它被附加的位置。而自身不再存在于你创建它时所在的位置。对用来临时包含节点，而后移动到实时DOM树的元素节点就不是这情况。

 

3.添加DocumentFragment到实时DOM

      当你将文档片段作为参数传给appenChild（）或insertBefore（）方法时，文档片段的子节点将被传输成为调用这些方法的DOM节点的子节点。

 

4.使用文档片段上的innerHTML

      创建DOM结构的变通方法之一：创建一个片段，附加一个<div>到此片段，然后用<div>的innerHTML属性通过一段HTML字符串更新文段片段。

      要附加使用文档片段<div>创建的DOM结构时，你想要附加结构，但不要略过注入该<div>。

 

5.通过复制将片段所含节点保留在内存中

    要在内存中保留片段内容使得附加操作时节点仍在，只要使用cloneNode（）并在附加文档片段时复制它即可。