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

【问题标题】：Cost of storing live htmlCollection vs iterating array of item IDs (and tree traversal)存储实时 htmlCollection 与迭代项目 ID 数组（和树遍历）的成本
【发布时间】：2018-12-05 12:12:24
【问题描述】：

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

哪个练习更好/更有效率？

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

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

【问题讨论】：

标签： javascript performance dom traversal htmlcollection

【解决方案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

【讨论】：

感谢您的回答。出于好奇，如果您遍历 LIVE HTMLCollection 并对任何元素进行任何更改，它是否仍会遍历 DOM？
不确定“遍历 DOM”是什么意思。如果您的意思是如果它在 DOM 中搜索以查找元素，那么不会。