Есть ли хороший способ прикрепить объекты JavaScript к элементам HTML?

96

Я хочу связать объект JavaScript с элементом HTML. Есть простой способ сделать это?

Я заметил, что HTML DOM определяет метод setAttribute, и похоже, что он определен для произвольного имени атрибута. Однако это может устанавливать только строковые значения. (Вы, конечно, можете использовать это для хранения ключей в словаре.)

Особенности (хотя меня больше интересует общий вопрос):

В частности, у меня есть элементы HTML, представляющие узлы в дереве, и я пытаюсь включить перетаскивание, но событие drop jQuery даст мне только перетаскиваемые элементы.

Обычным шаблоном для получения информации обработчикам событий, по-видимому, является создание элементов HTML одновременно с созданием объектов JavaScript, а затем определение обработчиков событий путем закрытия этих объектов JavaScript - однако в данном случае это работает не очень хорошо. case (у меня мог бы быть глобальный объект, который заполняется, когда начинается перетаскивание ... но это немного неприятно).

javascript dom user47741
источник

Ответы:

44

Вы смотрели на метод jQuery data () ? Вы можете назначить элементу сложные объекты, если хотите, или вы можете использовать этот метод для хранения ссылки на объект (или некоторые другие данные), по крайней мере.

Фил Уилер
источник
8
Спасибо: это в значительной степени то, что я искал. Интересно определить этот метод jquery хранит ключи в глобальном словаре в строковом атрибуте каждого элемента. Имя этого строкового атрибута генерируется случайным образом при первой загрузке jquery. (Предполагая, что нет хорошего способа сделать это, нет лучшего способа сделать это только с использованием DOM)
user47741
6
Стоит отметить, что jQuery data() работает с использованием ответа, который дал bobince, поэтому, если вы еще не используете jquery, вы также можете использовать его.
Eamon Nerbonne
6
Забавно, как я могу оглянуться на этот ответ 6 лет спустя и подумать: «Это очень неоптимальный ответ. У @bobince должен быть принятый».
Фил Уиллер,
6
В этом вопросе нет тега jQuery.
Michał Perłakowski
111

Объектам JavaScript могут быть назначены произвольные свойства, вам ничего не нужно делать, чтобы это разрешить. Сюда входят элементы DOM; хотя такое поведение не является частью стандарта DOM, оно имело место с самых первых версий JavaScript и является полностью надежным.

var div= document.getElementById('nav');
div.potato= ['lemons', 3];
бобинс
источник
5
@ tat.wright - Произвольные свойства элементов HTML, о которых он говорит, называются свойствами Expando. Также обратите внимание, что div.potato не означает div.getAttribute ("potato")
nickytonline
37
@Tim Down: тогда просто не делай этого. Я не понимаю, почему это ненадежно - это все равно, что сказать, что объект String ненадежен, потому что вы можете установить для него значение null.
Саймон
5
@TimDown: Но не будет ли установка document.expando = falseломать jQuery.data тоже?
Джои Адамс
8
По моему опыту, причина, по которой это может быть плохо, - это возможные утечки памяти. Может быть, есть простой способ избежать этого, но когда я создал проект, в котором это активно использовалось, было много утечек памяти. Я думаю, вам нужно быть особенно осторожным, потому что подсчет ссылок не обрабатывается для вас (не очищается), если элемент удаляется со страницы, и, вероятно, наоборот.
eselk
7
Справедливое предупреждение: я с радостью делал то, что описывает ответ, но вместо имени поля «картофель» я использовал «область действия». Оказывается, «область действия» - это атрибут элементов ячейки таблицы ( <td>), а объект, который я назначил этому полю, был # toString'ed. Я был очень смущен, увидев td.scope === '[object Object]'.
Дэвид Грумс