Стоимость хранения живого htmlCollection против итеративного массива идентификаторов элементов (и обход дерева)

Question

Область выбора содержит элементы, которые загружаются динамически (до 100).Нажав на элемент, добавьте его копию в ящик для хранения.Нажав кнопку «x» на элементе в ящике для хранения, удалите элемент и отмените его выбор из области выбора.

Что лучше использовать / эффективнее?

Опция 1:
Когда элементы загружаются в область выбора, сохраняйте элементы в виде живого HTMLCollection в переменной.При щелчке по X повторите итерацию этой живой коллекции и отмените выбор, когда найдете.
Вопрос 1: Дорого ли хранить живую коллекцию как переменную?
Вопрос 2: Итерируя по этой живой коллекции, действительно ли она перебирает DOM или только сохраненную коллекцию?

Опция 2:
Когда элементы загружаются в область выбора, идентификаторы элементов сохраняются только в массиве.При щелчке X, итерируйте этот массив, когда идентификатор будет найден, выполните 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