问题标签 [documentfragment]

我正在编写一个聊天应用程序，它变得有点复杂，因为我希望它具有交付确认、消息缓存等功能。

现在，我处理消息缓存的方式是：

1. 用户点击对话

2. 从服务器获取的第一批消息存储在数组内部的“块”中。

3. 每个块都是一个文档片段，附加了n条消息（DOM 元素）。
4. 当用户向上滚动时，更多的块（片段）被添加到数组中，因为它们是从服务器获取的。
5. 当用户转到另一个对话，但随后决定加载之前加载的对话时，脚本会将所有片段附加到一个片段中，并将大片段附加到消息窗口中。

如果用户已经获取了大量消息，那么带有消息“块”的数组会如下所示：

每个片段内部附加了大约 10 条消息。

在使用片段之前，我通过获取每条消息的 HTML 表示来使用字符串。像这样的东西：

我决定使用片段，因为我发现操作每条消息更容易（通过像 fragment.getElementById 这样的操作），而不是必须使用 innerHTML 来解析字符串和操作元素。

但是，我现在质疑这是否是正确的选择，因为我不知道将片段保存在数组中是否实际上是内存密集型的，或者至少比字符串更密集。另一个缺点是现在，如果我想将片段存储在 中localStorage，我必须将每个片段的内容转换为 HTML 字符串，当我想localStorage与我的片段系统一起使用时，我必须转换每个 HTML 字符串回到文档片段。

使用片段似乎更自然，但现在我正在考虑返回保留 HTML 字符串。不过，这有点工作，因为我不再有旧代码了。

在这种情况下，使用片段而不是 HTML 字符串有什么好处吗？

谢谢你。

请参阅我在jsfiddle上的示例。一种红色rect作为静态降价存在。rect使用append方法附加第二个绿色。蓝色在哪里rect？您可以使用任何文档检查器看到蓝色rect已插入svg元素中，但它不可见。为什么？我尝试使用将大量矩形插入SVG，documentFragment但它们都不可见......

我有一个通过 javascript 动态生成的文本区域和按钮。我让它工作，以便当在文本区域中输入一个值，然后单击按钮时，将创建随机数量的 SPAN 标签。对于文本区域中值的每个字符，都会创建一个带有 hidden 属性的 span 标签。

这是一个工作小提琴： https ://jsfiddle.net/9feso12c/

使用 JavaScript，我将这些跨度附加到文档片段中。如果我将文档片段附加到容器中，则所有跨度都会按顺序附加到 DOM。我想要的是“打乱”文档片段，然后将其附加到 DOM。

当在文本区域中输入 HELLO 并单击按钮时，我现在拥有的内容：

我想要的是：

我正在尝试通过 jsoup DOM 模型提取和替换 JavaScript DocumentFragments 的等价物。

有没有人有一些现成的代码来模拟DOM 范围选择和操作？我想选择一个文本范围，它可能会通过多个内联节点（例如 <a>、<span> 等），在此类内联节点的中间开始或结束等。在 JavaScript 中，使用 Range 很容易操作，从其中提取 DocumentFragment，围绕它等。我猜 JavaScript Range 正在根据需要拆分内部节点，以正确处理此类提取和插入。我将如何使用 Java 中的 jsoup 执行此操作？

编辑：只是大声思考如何做到这一点 - 可能需要在我的范围内搜索“峰值”元素，然后转到范围的开始和结束，并通过跳跃将它们“提升”到“峰值水平”如果我的开始是孩子没有，则给父母。0，或者在范围开始元素之前拆分元素子列表......如果有这样的代码准备好，我宁愿重新使用它，否则将不得不从头开始编写。

2015 年 12 月 18 日更新：用我开发的工作代码发布了我的答案，见下文。

我读到有时最好先将 DOM 元素附加到文档片段以避免重排（https://developer.mozilla.org/de/docs/Web/API/Document/createDocumentFragment）。

使用 SVG 我想知道在附加到 DOM 树之前附加所有 SVG 元素之间是否存在（性能）差异

1. 文档片段
2. 一个 SVG 组元素（尚未附加到 DOM 树）

也许有人有线索。

使用文档片段或未附加的创建的 div 以避免多次命中 DOM 之间有区别吗？

假设我们要生成 100 个列表项......

我们页面的内容：

场景一：文档片段

在这种情况下，我们正在创建 li，用一些简单的文本填充它，然后将其附加到片段中。循环完成后，片段将附加到列表中。我们避免对 DOM 100x 执行 ping 操作，并且仅 ping 一次以附加片段。

场景 2：未附加的 div

在这种情况下，我们创建一个 div，它的作用类似于文档片段，因为它不在 DOM 中。我们将所有创建的 li 附加到 div 中，最后将 div 的内容附加到 DOM 中的列表中。

这两种情况有什么区别？就避免多次 ping DOM 而言，似乎两者都达到了相同的结果。

我正在尝试将新创建的元素附加到 div，然后将 div 附加到文档片段，但它没有按预期工作。请帮助我确定我缺少什么。

据我了解，您应该能够将所有内容附加到 div，然后将 div 附加到片段。当我运行代码时，没有对 DOM 进行任何修改。我认为这可能是因为范围界定，或者第二个 json 请求设置不正确

我相信我的问题很简单，但是在花了一些时间搜索之后，我找不到令人满意的解决方案。

我有一个 DocumentFragment 元素，我想检查它是否完全被某个 html 标签包裹。这是我试图将其转换为 JavaScript 的伪代码：

对于 DocumentFragment，例如：

该函数应返回 span 对象。

但是对于像这样的片段：

它应该返回未定义。

在 d3 版本 3 中，我有这段代码，效果很好：

该代码在版本 4 中不起作用。所以查看API和更改日志，我想也许是这样的：

但这也不起作用。有没有人有 d3.v4 for d3.html 的工作示例？

谢谢

我有一个 css 预加载器，我想在页面加载时显示它。这是可见的。但是我想在页面加载后/一旦窗口/文档准备好后删除它。这是我遇到困难的部分。

我在控制台中得到以下信息：

未捕获的类型错误：无法读取 null 的属性“样式”。在 script.js 文件的第 40 行，即：preloader.style.opacity = 1;

我附上了一个包含所有相关代码的 JS Fiddle。 https://jsfiddle.net/kultura/xpa4vz8e/

当我开始尝试学习 javascript 时，我想为这个特定示例找到一个使用严格 javascript 的解决方案。

到目前为止，我已经将脚本进一步向下移动，就在标签结束之前。控制台在警告 id 'preload' 时也会返回 null，所以根据我的发现，我不确定它是否与调用时无法访问的元素有关getElementById

您的帮助和清晰将不胜感激。多谢你们！