Чи є хороший спосіб приєднати об’єкти JavaScript до елементів HTML?


96

Я хочу пов'язати об'єкт JavaScript з елементом HTML. Чи є простий спосіб це зробити?

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

Специфіка (хоча мене здебільшого цікавить загальне питання):

Зокрема, у мене є HTML-елементи, що представляють вузли у дереві, і я намагаюсь увімкнути перетягування, але подія падіння jQuery дасть мені лише елементи, які перетягуються та скидаються.

Здається, звичайним шаблоном отримання інформації до обробників подій є створення елементів HTML одночасно з тим, як ви створюєте об'єкти JavaScript, а потім визначення обробників подій, закриваючи ці об'єкти JavaScript - однак це не працює занадто добре в цьому case (у мене може бути глобальний об'єкт, який заповнюється, коли починається перетягування ... але це здається трохи неприємним).

Відповіді:


44

Ви розглядали метод jQuery data () ? Ви можете призначити елементу складні об'єкти, якщо хочете, або ви можете використати цей метод, щоб утримувати посилання на об'єкт (або деякі інші дані) принаймні.


8
Дякую: Це майже те, що я шукав. Цікаво, що для визначення цього методу jquery зберігає ключі в глобальному словнику в рядковому атрибуті кожного елемента. Ім'я цього рядкового атрибута генерується випадковим чином при першому завантаженні jquery. (Припускаючи, що немає хорошого способу зробити, немає кращого способу зробити це лише за допомогою DOM)
user47741

6
Варто зазначити, що роботи jQuery data() працюють за допомогою відповіді, яку дав bobince, тому, якщо ви ще не використовуєте jquery, ви можете скористатися нею.
Eamon Nerbonne

6
Забавно, як я можу озирнутися на цю відповідь через 6 років і подумати: "це дуже неоптимальна відповідь. @Bobince повинна прийняти прийняту".
Філ Уілер,

6
У цьому питанні немає тегу jQuery.
Міхал Перлаковський

111

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

var div= document.getElementById('nav');
div.potato= ['lemons', 3];

5
@ tat.wright - Довільні властивості елементів HTML, про які він говорить, називаються властивостями Expando. Також зверніть увагу, що div.potato не означає div.getAttribute ("картопля")
nickytonline

37
@Tim Down: тоді просто не роби цього. Я не розумію, чому він не надійний - це все одно, що сказати, що об’єкт String ненадійний, тому що ви можете встановити для нього значення null.
simon

5
@TimDown: Але чи не буде встановлення document.expando = falseперерви jQuery.data теж?
Джої Адамс

8
З мого досвіду, причиною цього може бути погано - можливі витоки пам'яті. Можливо, є простий спосіб уникнути цього, але коли я створив дизайн, який активно використовував це, у нього було багато витоків пам'яті. Я думаю, що ви повинні бути особливо обережними, тому що підрахунок посилань не виконується для вас (не очищається), якщо елемент видаляється зі сторінки, і, можливо, навпаки.
eselk

7
Чесне попередження: я із задоволенням робив те, що описує відповідь, але замість назви поля "картопля" я використовував "сферу дії". Виявляється, "область" - це атрибут елементів комірки таблиці ( <td>), і об'єкт, який я призначив цьому полю, був # toString'ed. Я був дуже розгублений, побачивши td.scope === '[об'єктний об'єкт]'.
David Groomes
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.