Сохранение элемента в сравнении его идентификатор, что является наиболее эффективным

#javascript #dom #getelementbyid

#javascript #dom #getelementbyid

Вопрос:

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

У каждого из этих элементов есть идентификатор.

Что наиболее эффективно: хранить идентификаторы в моем массиве или сохранять сами элементы?

Если я сохраняю идентификаторы, то каждый раз, когда я хочу получить доступ к элементам, мне нужно вызывать getElementById. Если я сохраняю сами элементы, то, по моему мнению, это требует больше «усилий» от браузера (хотя я понятия не имею, как это работает на практике, и было бы интересно узнать больше).

Ответ №1:

Намного, намного эффективнее хранить ссылку на элемент, а не просто id , потому что, как вы сказали, вы избегаете поиска, когда выполняете операции с ним.

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

Комментарии:

1. Не могли бы вы дать простое объяснение тому, как работает эта «ссылка на элемент»? Означает ли это, что браузеру необходимо обновлять эту ссылку каждый раз, когда я выполняю некоторые манипуляции с DOM (я имею в виду, не обязательно с самим элементом)?

2. @Christophe: Это просто ссылка на объект, как и на любой другой объект. var elm = document.getElementById("foo"); Var elm теперь содержит ссылку на элемент с id «foo». (Возможно, вы слышали слово «указатель»; ссылка похожа на указатель.) Для браузера не должно быть никакой дополнительной работы, если вы сохраняете ссылку на элемент, хотя, конечно, то, что происходит под прикрытием в браузере, варьируется от реализации к реализации. Комментарий IE заключается в том, что DOM-объекты IE являются мусором, собираемым иначе, чем объекты JS, и в этом были ошибки IE.

Ответ №2:

Вы сохраняете не элемент в массиве, а ссылку на элемент в DOM. Я бы предпочел сохранить ссылку на элемент вместо сохранения его идентификатора.