保留对附加节点 javascript 的引用

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

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

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

// 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;

有关SitePoint的更多信息

Answer 3

来自DocumentFragment的文档 ：

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

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

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

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

Answer 4

就像杰克的解决方案一样，但如果您使用的是esnext，则可以使用Array.from

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

element.appendChild(frag);

return children;

Answer 5

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

Answer 6

感谢@The Sloth 的评论，我找到了这个解决方案，最终为我解决了这个问题：

var node = element.lastElementChild

在我的例子中， element.lastChild返回了一个文本节点而不是附加的节点。