Какой способ лучше?Хранение объектов DOM в массиве объектов или прямая манипуляция dom?

Question

Название может быть не слишком ясным, но позвольте мне объяснить, что я имею в виду, «Какой способ лучше? Хранение объектов DOM в массиве объектов или манипулирование Direct dom?».

У меня есть списокОбъекты DOM для объяснения:

<ul>
  <li></li>
  ...
</ul>

li являются динамическими и обновляются на основе определенных операций.

Наше требование состоит в том, чтобы проверить, содержит ли список элемент стот же текст, что и новый, например, рассмотрите листинг файла, и вы переименуете узел, и, если имя уже существует, удалите все объекты DOM, которые содержат тот же текст, и сгенерируйте последний (надеюсь, это довольно ясно).

Теперь у меня и одного из моих коллег есть обсуждение, и обсуждение выглядит следующим образом:

Мой коллега говорит, сохраните объекты DOM в массиве объектов и затем добавьте их в списоки когда предположительно выполняются операции переименования, переберите этот массив объектов, в котором хранится ссылка на элемент DOM, и выполните removing и затем генерирование новой операции узла, потому что он считает, что выборка элемента из DOM будет более неэффективной.

Моя идея заключается в том, чтобы не хранить список и не использовать память, поскольку DOM может обновляться в любой моментмомент времени, поэтому каждый раз, когда вы хотите удалить и добавить узел, извлекающий список, выполняйте циклы и выполняйте операции, потому что я считаю, что если вы сохраняете список, вы потребляете память, а после обновления DOM вам снова придется обновлятьмассив, иначе он будет хранить ссылку на старый объект DOM, и это сделает его более неэффективным.

Поэтому, пожалуйста, помогите мне понять, какой метод / идея, по вашему мнению, эффективен и почему?

Answer 1

нет смысла хранить данные в массиве. просто используйте мощную среду обработки DOM, такую ​​как jQuery, и работайте непосредственно с DOM.

Answer 2

Даже если вы поддерживаете массив элементов DOM, Javascript все равно придется искать элементы в DOM при их обновлении. Я думаю, что уровень сложности, который вы добавляете путем создания, совершенно не нужен. Предполагая, что пользовательский метод массива будет более эффективным, в значительной степени предполагается, что вы сможете сделать этот код более эффективным, чем разработчики браузеров смогли сделать движок Javascript в своих соответствующих браузерах. Вероятно, небезопасная ставка.

Answer 3

При операции переименования - переберите список файлов для дубликатов ... если найден какой-либо дубликат, предложите пользователю выбрать другое имя, иначе перейдите и переименуйте его. Зачем вам использовать еще один массив объектов для циклического прохождения, когда у вас есть исходный список, если вы не хотите сохранить исходный массив списка файлов для какого-либо другого использования?

Answer 4

Нет необходимости поддерживать дополнительный массив.Большинство методов поиска DOM возвращают NodeList ^[MDN] , который представляет собой живую коллекцию элементов DOM, т.е. коллекция всегда обновляется, когда происходит какая-либо модификация.

Таким образом, вы можете сделать:

var list_elements = yourlist.getElementsByTagName('li');

и list_elements всегда будут ссылаться на всех li потомков вашего списка.

Обновление: Конечно, вы также можете просто сохранить ссылку на yourlist и получить доступ к элементам li с помощью yourlist.children ^[MDN] .

Вы можете сэкономить дополнительный шаг и извлекать элементы каждый раз, когда хотите внести изменения, сохраняя ссылку на эту коллекцию.

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