问题标签 [documentfragment]

我正在使用一个库（prosemirror），它为我提供了一个从数据库中获取的 json 文件片段。现在我想在我的组件中显示它。如何？两个小时的谷歌搜索没有给我任何东西。

在我的组件中使用它

或者

印刷

当某些 html 字符串添加到 DocumentFragmentinnerHTML属性时，不存在子级。但与由createElementshow children 创建的 Element 相同的操作。我创建了一个简单的示例来比较 DocumentFragment 和简单元素的 innerHTML 行为：

但是片段可以显示由 appendChild 添加的孩子：

如何解决这种奇怪的 DocumentFragment 行为？

附加：我需要 DocumentFragment 作为临时 HTML 容器。

JSFiddle与重现问题。

我创建了一个 Web 组件，并希望从组件中访问元素。
我正在使用 .attachMode({mode:'closed'})，因此父级无权访问。

一些尝试：

1. 在文档片段中 - this、self、window 和 document 都引用父窗口。而且没有人可以访问影子根。
2. 尝试将 shadowroot 存储在全局变量中，并从片段或 connectedCallback 内部访问它。
   即使这样可行，它也会破坏使用 {mode:'closed'} 的意义，但无论如何它都不起作用。

我有一个有效的黑客，但无法想象我必须使用它。
封装的全部意义在于事物可以是自包含的，但是如果 JS 不能作用于其容器中的其他项目，那对我们有什么好处呢？

如果这是解决方案，希望有一个提示来解释组件实现方式的逻辑。
不过，这是 hack：包含一个运行 JS onload 的图像。

关于类似问题（25048359、16633057、55101967等）的注意事项 - 当我需要关闭模式时，这些答案将不起作用。

我无法理解对象的数据分配何时是引用以及何时创建对象的副本。我以为我理解了，但下面的例子不符合我对它的简单理解。

事件处理程序开始以下一系列步骤。
Promise.allSettled( [ gather_write, get_build ] ).then( test );

承诺gather_write并get_build执行不相关的功能。第一个从 DOM 收集一些数据并将其写入数据库。第二个从数据库中检索数据并构建文档片段。如果两者都满足，则 DOM 中的节点将替换为片段。

此处显示的代码太多，但是get_build，在成功从数据库中获取数据后，调用一个单独的函数来构建文档片段，并将其结果作为解析对象的属性返回。效果很好；然后我想尝试在gather_write拒绝和get_build履行的情况下向用户提供选项，这需要临时存储文档片段。因此，与其将其返回并将其传递回 ，不如将其Promise.allSettled存储在构建它的函数的属性中。

在同步函数build中，代码设置为：

函数build必须在 promiseget_build可以解决之前完成，之后Promise.allSettled可以评估；build.html并且，如果两个 promise 都满足，则可以调用将 DOM 节点替换为存储在其中的新建片段的函数。我认为这build.html将是对节点对象的引用，f并且由于f在块中设置为 null finally，这将在上述所有内容完成之前发生，并且当build.html最终运行要使用的代码时，它将指向 null而不是片段。所以，赋值语句应该是build.html = f.cloneNode(true).

但是，无论是否使用f.cloneNode. 你能解释一下为什么吗？如果没有必要，我不希望浏览器采取步骤克隆片段，但是在不理解为什么它在不克隆的情况下工作的情况下犹豫要排除它。

谢谢你。

我想在 javascript 中访问 data-index 属性，但是当我输入taskElement.dataset.index时出现错误

如何访问模板元素中的属性？

我正在尝试将 DOMParser 的 html 结果附加到 DocumentFragment，然后将其附加到正文（在某些加载事件之后）。

附加整个DOMParser 结果有效，但仅附加结果的body一部分失败。

我究竟做错了什么？谢谢！

我正在开发一个 ePub 应用程序，目前我想在侧边栏上显示一个注释/突出显示部分。

我能够获取Range对象（通过 document.crateRange 方法），然后从中调用 cloneContents ，它返回一个DocumentFragment对象。

我曾尝试创建一个 ref 对象，并能够将 DocumentFragment 对象附加到其中。但是，我想将 DocumentFragment 对象包装在一个复选框元素中。

我曾尝试过类似的东西

这将引发错误Uncaught Error: Objects are not valid as a React child (found: [object DocumentFragment]). If you meant to render a collection of children, use an array instead.。

我知道我只能从这个 DocumentFragment 对象中获取 textContent ，但是我想保留它附带的样式，并将其包装在一个复选框中。我怎么能在反应中做到这一点？

PS documentFragment object在日志上看起来像这样：

我正在尝试使用构建以下内容createDocumentFragment()并将其附加到document.body. 我通常的做法是通过它来引用一个元素id。既然这里没有'ids，我该如何构建这样的东西？

我正在尝试将文档片段的内容（在纯 javascript 中）插入到 DOM 元素中。工作原理是这样的：

现在我使用模板元素将“a”的内容放入文档片段

现在我想b用content. 我尝试了一个简单的b.innerHTML = content.innerHTML;，但似乎文档片段没有innerHTML属性。
这可能吗？

注意：我知道这完全是一种无效的方式来完成制作任务b.innerHTML = a.innerHTML，但显然这只是我正在设法完成的更大任务的简化。

MDN 文档说：

因为所有节点都一次插入到文档中，所以如果单独插入每个插入的节点，只会触发一次重排和渲染，而不是可能触发一次。

所以

好于

但是使用append呢？append和使用 documentFragment 一样高效吗？