保留对附加节点 javascript 的引用

Posted 2023-05-09

【中文标题】保留对附加节点 javascript 的引用

【英文标题】：retain reference to appended node javascript

【发布时间】：2012-10-30 04:59:02

【问题描述】：

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

我正在将一个文档片段附加到 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 后它是空的。就像元素被整齐地从 Fragment 滑入 dom，而 Fragment 只是闲置着。

【参考方案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;

【讨论】：

你，先生，是个怪诞的天才。这非常优雅，并且在我的情况下完美运行。我会尽快，除非有更简单的事情，否则你会得到赏金和我永恒的感激！

6 年后，同样的问题。 一定有办法，我想。搜索谷歌，唉！这是我自己的问题！希望我能给你另一个支持。

【参考方案2】：

如果您只是在添加它之后查看，lastChild 是您的最佳选择。像这样使用它：

var e = element.lastChild;

更多info in SitePoint

【讨论】：

好主意。但是，我可能会将其附加到不同的位置，并且附加的片段可能有几个直接注入到 dom 中的节点，这意味着我只会得到其中的最后一个。

哇 >5 年没有投票了...但是这个答案对我有用，我想至少在 50% 的情况下会这样！如此简单 -> 很棒

【参考方案3】：

来自DocumentFragment的文档：

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

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

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

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

【参考方案4】：

像 Jack 的解决方案，但如果你使用 esnext，你可以使用 Array.from 作为

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

element.appendChild(frag);

return children;

【参考方案5】：

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