10

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

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

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

var frag = document.createDocumentFragment();
//add some content to the fragment
element.appendChild(frag);

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

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

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

谢谢！

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

4

5 回答 5

19

这正是您所描述的；当元素被附加到一个元素时，它们会从片段中删除，以防止延迟引用造成内存泄漏。

获取这些子节点的一种方法是childNodes在执行之前制作片段的浅表副本appendChild()：

// make shallow copy, use Array.prototype to get .slice() goodness
var children = [].slice.call(frag.childNodes, 0);

element.appendChild(frag);

return children;
于 2012-11-12T16:17:26.707 回答
5

如果您只是在附加它之后寻找，那么这lastChild是要走的路。像这样使用它：

var e = element.lastChild;

SitePoint 中的更多信息

于 2012-11-12T16:16:37.797 回答
2

来自 DocumentFragment 的文档：

各种其他方法可以将文档片段作为参数（例如，任何 Node 接口方法，例如 appendChild 和 insertBefore），在这种情况下，附加或插入片段的子项，而不是片段本身。

所以appendChild方法返回 documentFragment 但它是空的，因为它的子节点被插入到您的element对象中并且（来自appendChild doc）：

[...] 一个节点不能同时位于文档的两个点。因此，如果节点已经有父节点，则首先将其删除，然后将其附加到新位置。

现在......您可以将您的孩子存储在缓存数组中，然后返回它（或查看 Jack 解决方案:-)）

于 2012-11-12T16:24:09.280 回答
2

就像 Jack 的解决方案一样，但如果您使用的是 esnext，您可以使用Array.fromas

const children = Array.from(frag.children);

element.appendChild(frag);

return children;
于 2018-08-03T16:46:35.557 回答
0

如果您的文档片段中有一个主要元素，则可以使用.firstElementChild，仅此而已。要制作多个副本，请使用.cloneNode(true). 示例 - https://codepen.io/SergeiMinaev/pen/abLzQjZ

于 2021-12-01T18:39:14.133 回答