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

Question

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

哪个实践更好/效率更高？

选项1：
将项目加载到选择区域后，将它们作为实时HTMLCollection存储在变量中。单击X时，将迭代此实时集合，并在找到时取消选择它。
问题1：将实时集合存储为变量是否昂贵？
问题2：在迭代此实时集合时，它实际上是在DOM上还是仅在存储的集合上进行迭代？

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

Answer 1

这都不是问题，因为迭代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上单击后 ）

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