Question

请不要图书馆。超出我的控制范围。

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

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

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

再次，这有效！我不需要对如何向dom添加内容进行故障排除！

如果我设置var e = element.appendChild(frag);，则所有内容都会正常添加，但e =空文档片段。

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

谢谢！

修改进一步探讨后，上面的e实际上是对frag var的返回引用，在将其附加到dom后为空。这就像元素整齐地从片段滑入dom一样，片段只是空着。

Answer 1

这正是你所描述的;当元素附加到元素时，它们将从片段中删除，以防止延迟引用中的内存泄漏。

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

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

element.appendChild(frag);

return children;

Answer 2

如果你在追加它后看，lastChild就是你要走的路。像这样使用它：

var e = element.lastChild;

更多info in SitePoint

Answer 3

来自DocumentFragment的文件：

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

所以appendChild方法返回documentFragment，但它是空的，因为它的子节点已插入element对象和（来自appendChild doc）：

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

现在... 您可以将孩子存储在缓存数组中并在返回之后（或参见Jack解决方案： - ））

Answer 4

类似于Jack的解决方案，但是如果您使用的是esnext，则可以将Array.from用作

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

element.appendChild(frag);

return children;

保留对附加节点javascript的引用

4 个答案: