存储实时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