问题标签 [documentfragment]

我正在尝试用文档片段替换元素的所有内容：

var frag = document.createDocumentFragment()

文档片段正在创建得很好。那里没有问题。我给它添加元素就好了，那里也没有问题。我可以使用element.appendChild(frag). 这也很好用。

我正在尝试创建一个类似于 jQuery 的 HTML 的“替换”方法。我不担心旧浏览器的兼容性。是否有一个神奇的功能可以替换元素的所有内容？

我已经尝试过element.innerHTML = frag.cloneNode(true)，（根据我能找到的每个“替换元素内容”wiki），这是行不通的。它给了我<div>[object DocumentFragment]</div>。

请不要使用库，甚至不要使用 jQuery 解决方案。

为了清楚起见，我正在寻找一种“神奇”的解决方案，我知道如何一次删除所有现有元素，然后附加我的片段。

请不要图书馆。在我的控制外。

我正在将一个文档片段附加到 dom。这一切都有效。没问题。

附加片段后如何保留/检索节点列表？相关代码：

再次，这有效！我不需要关于如何将东西添加到 dom 的故障排除！

如果我设置var e = element.appendChild(frag);，一切都会正常附加，但是e= 一个空的文档片段。

我在这里寻找一些光滑的魔法巫术。不要让我循环遍历整个 dom。内容可以是任何东西，一个或多个带有或不带有子节点的节点。如果 querySelectorAll 有一些技巧或可以接受的东西。

谢谢！

编辑 进一步戳，似乎e上面实际上是对fragvar的返回引用，在将它附加到dom之后它是空的。这很像元素被整齐地从片段滑入dom，片段只是空无一人。

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

可以在这里看到一个例子。如果您低头查看 DocumentFragment 部分，您会看到：

为什么“oFrag”被克隆而不是仅仅附加它？另一篇博文没有使用“cloneNode”（作为比较）。

我对 JS 的性能有疑问。

说，我有下一个代码：

这段代码只是为其他一些函数创建了 shell 来创建一个网格，创建网格的过程非常复杂并且有很多验证，目前我使用 2 种方法来填充网格，一种在数组变量中创建整个 html另一个创建元素并将它们附加到documentFragment.

我的问题是，据我了解，使用片段时是否真的有性能改进——它们管理内存中的元素，因此它们不会附加到文档，因此不会触发 DOM 重新计算和其他讨厌的东西。但是我创建变量的方式是，在我将容器附加到实际页面之前，它们不会附加到任何 DOM 元素。

所以我想知道前面的代码是否比使用像这样包装它的文档片段具有更好的性能：

正如我已经说过的，这是一个关于性能的问题，我知道作为最佳实践建议使用片段，但我不能忘记这样做只会在内存中创建一个新对象并且什么都不做，所以我认为在这种情况下放弃片段是有效的。

希望一些 js 大师/上帝会在这里照亮希望并帮助我们解决这个问题。

编辑：所以，我一直在寻找与这个问题相关的东西，似乎 documentFragments 并不一定意味着更好的性能。

它只是节点的“内存中”容器。片段和 a 之间的区别在于<div>片段没有父级，它永远不会在 DOM 上，只是在内存中，这意味着对片段进行的操作更快，因为没有对 DOM 的操作。

W3C关于 documentFragments 的文档非常含糊，但重点是，每个人最喜欢的浏览器都没有使用真正的片段，而是根据这个 MSDN 文档创建一个新文档。这意味着，IE 上的片段速度较慢。

所以，问题是，如果我在变量中创建一个元素（<div>例如 a）但不将它附加到 DOM，添加元素（div、表等）和东西，然后在所有工作完成之后（循环、验证，元素样式），该元素被附加，它与片段相同吗？

鉴于 IE 使用“假”片段这一事实，我至少在 IE 中使用这种方法（使用诸如 div 之类的元素，而不是片段）会更好，我真的不在乎 IE，但我需要测试它（办公室的政策）。

另外，如果我像这样在数组上创建所有 html：

然后这样做

它在 IE 上要快得多，但其他主要浏览器（FF、Chrome、Safari 和 Opera）在使用容器然后附加它（片段或 div）时表现更好。

所有这一切都是因为创建所有元素的过程非常快，大约 8 - 10 秒创建多达 24 列的 20,000 行，这是很多元素/标签，但是浏览器似乎冻结了几秒钟它们都是一次附加的，如果我尝试一个接一个地附加它们，那就太糟糕了。

再次感谢大家，这真的很有趣。

所以我读到 jQuery 在内部使用文档片段来加快渲染速度。但是我想知道是否有人知道在我使用每个循环将 img 元素附加到 DOM 的情况下 jQuery 是否会使用 createDocumentFragment？

或者我是否需要使用此代码来减少浏览器重排的次数？

此外，displayArray 由其他代码填充，此处未显示，这些代码基于 JSON 文件中的路径创建 img 元素。

谢谢你的任何建议。

我环顾四周，似乎这可能是不可能的，但如果您可以使用 d3 的选择功能来获取一整块 svg 标记并将其用作您想要复制的结构的架构，那就太棒了次。例子：

只需弹出到当前的输入循环会容易得多，而不必为每个元素添加填充和 d 并转换属性，例如

我想我希望 d3 更像 jquery。任何人都知道你怎么能做到这一点？

UsingDocumentFramgment允许我们将 DOM 元素彼此附加，而不会导致浏览器重排（即使用离线 DOM 树）。许多像jQuery这样的库使用文档片段来提高性能。

文档片段可以具有复杂的结构。例如，假设它代表如下内容：

或包含多个子项的文档片段：

通常，当我们完成构建片段时，我们会将其附加到主 DOM 树。

当我们这样做时会发生多少次回流？它是否取决于文档片段的直接孩子的数量？

更新：

我收到了来自Google Chrome 团队的Addy Osmani的回复：

只有一个 DOM 重排。PS：我们更倾向于将重排称为布局，因为它基本上是在页面中触发布局/重绘的事件。

我正在制作一个最小的 JavaScript WYSIWYG 控件。

我不想使用 document.execCommand 因为它不允许任意 HTML，它在浏览器之间不一致等。

到目前为止，这是我精简到最低工作代码的内容：

http://jsfiddle.net/2WxQn/1/

如果某些选择已经包含强标签（或其他），我该如何制作以便再次单击按钮删除这些标签，而不是用新的强标签包装选择？

写这个问题给了我一个想法。我现在将尝试它并回答我自己的问题，如果它有效 - 这样这个问题就在这里，以防其他人遇到这个问题。否则我会屏住呼吸等待你的帮助:)

编辑：显然，如果其他人发布了一个可行的解决方案，我会接受他们的答案而不是我的答案，如果它更好的话。

编辑（2）：所以我的想法没有成功。事实证明，某些东西（可能是 range.insertNode）会神奇地为您平衡标签。我似乎没有从选择、范围或碎片中获得足够的信息来始终知道选择是否在给定的标签内。有任何想法吗？

将包含空文档片段的变量视为空变量的最干净的方法是什么？

我有以下代码

和模板

问题是，当 中的变量esternal-examples为空时，xsl:for-each循环不会运行，但无论如何它都会产生一个空的文档片段，从而使测试test="$examples"通过而不是失败。

我应该在模板中做什么以确保模板example-comments为空时不返回任何内容？

我可以在 Chrome 的控制台中完美地导航元素，但我似乎无法使用childNodesor获得对嵌套 DocumentFragment 的引用firstChild。

这是 jsFiddle 中的代码：http: //jsfiddle.net/Ge8au/2/

这是代码：