文档片段vs`div`容器

时间：2016-07-04 09:07:55

标签： javascript html dom

我已经搜索了stackoverflow问题并发现了关于同一主题的几个问题，但是他们都没有找到我想要的广泛答案。大多数答案都围绕着表现，但我也在寻找其他差异。基本上，this one简洁地总结了这个问题：

  

如果我在变量中创建一个元素（例如），但是不要   将它附加到DOM，添加元素（div，表格等）和东西   完成所有工作后（循环，验证，造型）   元素），附加该元素，它是否与片段相同？

我已经决定再次试一试，看看是否有人能给出一个好的答案。

那么，为什么我要使用它：

var fragment = document.createDocumentFragment();
var divContainer = document.createElement("div");
var divHeader = document.createElement("div");
divContainer.appendChild( divHeader );
fragment.appendChild( divContainer );
document.getElementById("someElement").appendChild( fragment.cloneNode(true) );

而不是：

var divContainer = document.createElement("div");
var divHeader = document.createElement("div");
divContainer.appendChild( divHeader );
document.getElementById("someElement").appendChild( divContainer );

2 个答案:

答案 0 :(得分：6)

两种方法大致相同，因为它们都可以用于存储元素而无需立即修改DOM。虽然有一些捕获量。

的差异：

  • div有原型链HTMLDivElement - HTMLElement - Element - Node - EventTarget，而document-fragment有DocumentFragment - Node - EventTarget。这意味着div有更多可用的方法和属性（例如innerHTML）。
  • 向DOM附加div时，插入整个元素，变量仍然引用该元素。附加document-fragment插入其所有内容，使变量引用空片段。

用法document-fragment：

var fragment = document.createDocumentFragment();
var div1 = document.createElement('div');
var div2 = document.createElement('div');
var div3 = document.createElement('div');

fragment.appendChild(div1);
fragment.appendChild(div2);
div2.appendChild(div3);              //fragment now contains the sub-tree

document.body.appendChild(fragment); //fragment is now an empty document-fragment, and is not in the DOM.

结果：

<body>
    <div></div>       <!--div1-->
    <div>             <!--div2-->
         <div></div>  <!--div3-->
    </div>
</body>

用法div：

var container = document.createElement('div');
var div1 = document.createElement('div');
var div2 = document.createElement('div');
var div3 = document.createElement('div');

container.appendChild(div1);
container.appendChild(div2);
div2.appendChild(div3);               //container is now a div with the sub-tree inside.

document.body.appendChild(container); //container is still the div with the sub-tree, but is now in the DOM.

结果：

<body>
    <div>                 <!--container-->
        <div></div>       <!--div1-->
        <div>             <!--div2-->
             <div></div>  <!--div3-->
        </div>
    </div>
</body>

简而言之：

  • 如果您只想插入一个元素（其他元素在中），请使用element。
  • 如果您想使用innerHTML以文本格式解析html，请使用element。
  • 如果要插入多个相邻的元素，请使用document-fragment。

答案 1 :(得分：0)

您可能正在尝试比较DocumentFragments插入方法与使用innerHTML生成DOM树。

首先让我们从definition开始：

  

DocumentFragment是一个没有父文档的最小文档对象。它   用作文件的轻量版本，以存储格式良好或   可能是格式不正确的XML片段。

所以使用DocumentFragments确实存在结构差异：在添加DOM元素之前，我们可以访问不同的DOM方法。

此外，DocumentFragments是much faster，而不是在循环的末尾附加一个带有div.innerHTML = '...'的大HTML文本，因为DOM结构不应该动态生成，它已经可以从Fragment中获得。 / p>

相关问题
最新问题