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

Question

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

哪个更好practise/more效率高？

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

选项 2：
当项目加载到选择区域时，仅将项目 ID 存储在数组中。当点击 X 时，迭代这个数组，当找到 ID 时，执行一个 'getElementById' 将遍历 DOM 然后取消选择它。

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

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

Cost of storing live htmlCollection vs iterating array of item IDs (and tree traversal)

javascript

performance

dom

traversal

htmlcollection