问题标签 [documentfragment]

这是一个有趣的问题，我想听听您对此的所有意见。

一个 jQuery ajax 调用会去除以下标签：

您无法通过数据访问它们。例如：

您也不能访问这些元素中的第一个子元素。例如：

我在网上读到 parseHTML (jQuery 1.8+) 可以解决这个问题。这没关系，但是如果用户不能使用高于 1.7.0 的 jQuery 怎么办？

我已经阅读了许多解决方案，说在 body 标签周围或其内部的额外元素也有效。我觉得这种方法不是很好，因为您添加了额外的 HTML。

我还看到人们在这些元素上使用正则表达式/替换。这更好，但对 HTML 仍然有相同的影响。

最后，我知道了过滤器的解决方案。如果您知道确切的元素，这没关系，但如果您不知道，则可能会使用另一个元素。如果不是孩子，过滤器将无法找到它：

一个有趣的解决方案是createDocumentFragment()。在此页面上的某处阅读有关它的更多信息：http ://www.smashingmagazine.com/2012/11/05/writing-fast-memory-efficient-javascript/ 。

这种类型的编码旨在提高网站性能。上面的网站上有一个很好的例子。

从这里我读到你可以这样做：

但是这不起作用：如何过滤 body html 从 ajax 返回的数据？

然后我进一步看了一下。

最后我稍微扩展了一下：

这种方法不好吗？JS 有点重，我不确定这是一个好的解决方案。这会使其运行速度变慢（用于数据循环）还是有助于加快速度。

有没有一种方法可以在不更新 jQuery 的情况下访问 body 标签。

我很好奇大家的看法。我希望我没有错过任何东西。

编辑：

事实证明，Internet Explorer 不喜欢片段本身的 getElementById。

您可以使用以下方法解决此问题：

感谢您阅读本文。

我发现了这种奇怪的情况，Firefox 在克隆后似乎丢失了 documentFragment 的内容（深度标志设置为true）。这是一个 Firefox 错误，还是我缺少实现细节？

查看有关 ShadowDOM 的文章，它似乎是对 DocumentFragments 的增强。ShadowDOM 的真正好处是什么？CSS 特异性？我不能用 Fragments 做大致相同的事情吗？

我正在寻找每个功能的列表。例如，两者似乎都允许您在内存中和主渲染路径之外组装 dom 树。然而，ShadowDOM 似乎具有作用域 CSS 的额外好处。

在哪些情况下您会使用 ShadowDOM，而您只想使用 DocumentFragments？

更新

在我自己对此进行了更多研究之后，我发现这两种技术是完全正交的。

注意：由于问题已关闭，我无法自己回答。我最初将我的发现的细节放在下面的评论中，但我想更多的人会在这里查看文本。

Document Fragments是一个 Javascript/DOM 构建工具，用于在 DOM 之外创建非分层的节点集合（每个节点都可以是其他节点的父节点）。它们本质上是节点集合的包装器，一旦将片段附加到 DOM，它就会被放弃。DocumentFragments 允许您在同一级别收集多个节点，并将它们作为兄弟节点附加到另一个 DOM 节点。

Shadow Dom就是在更大的渲染 DOM 中隔离副作用。ShadowDom 允许您创建具有封装样式的沙盒可重用组件。当基于 ShadowDom 的组件添加到更大的 Web 应用程序时，其 CSS 样式不会泄漏到应用程序的其余部分，应用程序自身的样式也不会影响组件的呈现。

请注意，CSS 组合器（例如/deep/和::shadow）用于样式化（和选择）来自父 dom 的 shadowDom 组件，但这些组合器在不久的将来会被弃用。因此，建议使用 ShadowDOM 的可重用组件依赖 CSS 变量进行样式设置，如果它们打算由使用它们的应用程序自定义。

我有一组需要渲染到 DOM 中的项目，例如：

从数组中添加或删除项目时，我正在更新它的邻居nextId和prevId. 我还需要在 html 中更新它们。

我的问题是关于性能什么样的渲染将是有益的？

1. 仅使用appendChild并removeChild重新渲染innerHTML持有数字的邻居？
2. 或使用createDocumentFragment, 在每次更改时循环遍历数组并附加此片段。

PS请不要对外部库等提出建议。

创建 DocumentFragment 与创建$('<div/>')?

例如：

对比

当分离的元素看起来非常相似时，我不确定使用这样的 DocumentFragment 的优势。

第一个日志返回一个完整的li元素，而第二个返回一个空的DocumentFragment。为什么？我在任何文档中都找不到有关该行为的任何信息。

我正在使用<template>标签创建很多 DOM 元素（每个元素都具有相同的 HTML 结构）：

...和几行 JavaScript：

我很想在克隆的元素上添加一些事件侦听器。我无法从互联网上找到任何东西，并且我自己也厌倦了一些事情，例如：

...这些都不起作用。我可以简单地做类似的事情：

...但我想知道是否还有另一种更简单的方法，类似于那些对我不起作用的方法。

奇怪的情况，网上找不到解决办法。我有一些innerHTML在contentEditable我试图添加到文档片段的区域内......并保留格式，其中包括中断标签。当我这样做时：

最后一个日志返回 (img, span, img, span)。为什么循环不能识别中断标签，我该怎么做才能将它们添加到我的文档片段中？

当我在没有向片段附加任何内容的情况下登录时：

我得到“img，br，span，br，img，br，span”。一旦我取消评论appendChild，休息就会消失。为什么？？

我的解决方案：