Javascript 存储实时htmlCollection与迭代项ID数组（以及树遍历）的成本

选择区域包含动态加载的项目（最多100个）。单击项目，将其副本添加到存储框中。单击存储框中某个项目上的“x”按钮，删除该项目并从选择区域取消选择该项目

哪个练习/效率更高

选项1:
将项目加载到选择区域时，将项目作为活动HTMLCollection存储在变量中。单击X时，迭代此live collection并在找到时取消选择它。
问题1：将live collection存储为变量是否成本高昂？
问题2：当在这个活动集合上迭代时，它实际上是在DOM上迭代还是只在存储的集合上迭代

选项2:

---

将项目加载到选择区域时，仅将项目ID存储在数组中。单击X时，迭代此数组，找到ID后，执行“getElementById”，该ID将遍历DOM，然后取消选择它。

这两者都不是问题，因为迭代100个节点并不多

但是还有第三个选项，直接在克隆上存储对原始的引用。通过这种方式，您可以在以后通过查看克隆的相关文档找到原始文档 财产

因此，在克隆之后，将一个属性与原始属性一起添加到其中

const copyNode = originalNode.cloneNode(true);
copyNode.referenceToOriginal = originalNode; // make sure the property name is something that will not clash with built-in properties

然后，当您想要取消选择原始文件时（单击克隆的X后）

---

谢谢你的回答。出于好奇，如果您循环使用LIVE HTMLCollection并对任何元素进行任何更改，它是否仍然会遍历DOM？不确定“遍历DOM”的含义。如果您的意思是，如果它在DOM中搜索以查找元素，则不会。

const clone = clickedNode;// somehow get the copied node you clicked the X of
deselect( clone.referenceToOriginal );
clone.remove(); // remove the clone from the DOM