为什么在追加documentFragment时需要使用cloneNode? [英] Why does cloneNode need to be used when appending a documentFragment?

问题描述

我一直在研究在 Backbone.js 应用程序中使用 documentFragments 并想知道为什么我看到在将 documentFragment 附加到父 DOM 元素时使用cloneNode"的示例.

I've been looking at using documentFragments in a Backbone.js app and was wondering why I see examples where "cloneNode" is used when appending the documentFragment to the parent DOM element.

可以在此处查看示例.如果您向下看 DocumentFragment 部分，您会看到:

An example can be seen here. If you look down at the DocumentFragment section you'll see this:

oFrag = document.createDocumentFragment();
for (var i = 0, imax = aElms.length; i < imax; i++) {
 oFrag.appendChild(aElms[i]);
}

o.innerHTML = '';
o.appendChild(oFrag.cloneNode(true));

为什么oFrag"会被克隆而不是仅仅附加它?另一个博客文章没有使用cloneNode"(作为比较).

Why does "oFrag" get cloned instead of just appending it? Another blog post doesn't use "cloneNode" (as a comparison).

推荐答案

你的 第一链接 指的是博客文章，作者使用document.getElementsByTagName 而不是 document.getElementById，就像在测试用例中一样.如果你想给多个元素(即:divs)赋予相同的 documentFragment，你必须克隆它:

Your first link refers to the blog post where the autor uses document.getElementsByTagName instead of document.getElementById, like in test case. If you want a multiple elements (namely: divs) to be given the same documentFragment, you must clone it:

如果 child 是对文档中现有节点的引用，则 appendChild 将其从其当前位置移动到新位置(即，在将其附加到某个其他节点之前，不需要从其父节点中删除该节点).

If child is a reference to an existing node in the document, appendChild moves it from its current position to the new position (i.e. there is no requirement to remove the node from its parent node before appending it to some other node).

这也意味着一个节点不能同时在文档的两个点上.所以如果节点已经有一个父节点，它首先被删除，然后附加到新位置.

This also means that a node can't be in two points of the document simultaneously. So if the node already has a parent, it is first removed, then appended at the new position.

通过 MDN

很可能是作者(或其他人)在没有考虑这一点的情况下复制粘贴了代码.自己尝试一下 - 您可以使用 appendChild 而没有 cloneNode 并且一切正常.

Most likely the author (or someone else) copy-pasted the code without taking this into consideration. Try it yourself - you can use appendChild without cloneNode and everything works fine.

另一种可能性是，在 jsperf 上创建此测试用例的人并没有了解准备代码的工作原理，并且担心第一个测试会清空 aElms 数组，并且它将不再起作用.其实准备代码在每次定时迭代前都会执行，所以不用担心它的内容.

Another possibility is that someone who created this test case on jsperf didn't get much how preparation code works and was worried that the very first test will empty aElms array and it won't work anymore. In fact preparation code is executed before each timed iteration, so there's no need to be worried about its contents.

最后一件事可能是性能问题.如果你真的想测试真正的插入，你需要克隆节点.否则，您将改为测试树重新连接(参见上面的 MDN 链接).

The last thing may the performance concern. If you really want to test the real insertion, you need to clone the node. Otherwise, you'll test tree reattachment instead (see MDN link above).

另请注意，克隆会破坏事件侦听器.

快乐碎片化！;)

这篇关于为什么在追加documentFragment时需要使用cloneNode?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！