删除节点后存储节点的Javascript持久变量

Question

我在JavaScript中遇到了一个非常简单的问题（但不确定是否可以解决）。我有一个变量，用于存储具有特定类的节点。我要做的是从DOM中删除这些节点，但将其保留在变量中。但是由于显然这些变量存储了引用，因此一旦删除了这些节点，该变量就为空。

这是一个代码示例：

const modules = document.getElementsByClassName("drag-container");
var parent = document.getElementsByClassName("drag-container")[0].parentElement;
while (parent.firstChild) {
    parent.removeChild(parent.lastChild);
}
//here the modules variable is empty

删除节点后是否可以维护modules变量？

Answer 1

问题是getElementsByClassName返回一个HTMLCollection，并且它是 live ，因此，如果删除节点，它们也将从该集合中删除。您可以通过以下方式将该集合克隆到数组中：

  const modules = Array.from(/*HTMLCollection here */);

Answer 2

您可以使用新的传播语法克隆HTMLCollection数组（模块）。

const copiedModules = [... modules];

我希望这会有所帮助。