Могу ли я добавить произвольные свойства к объектам DOM?

Question

Могу ли я добавить произвольные свойства в объекты DOM JavaScript, такие как <INPUT> или <SELECT> элементы? Или, если я не могу этого сделать, есть ли способ связать мои собственные объекты с элементами страницы через свойство reference?

Answer 1

Конечно, люди делают это целую вечность. Это не рекомендуется, поскольку это грязно, и вы можете испортить существующие свойства.

Если вы зацикливаете код на for..in, ваш код может сломаться, потому что теперь вы будете перечислять эти недавно присоединенные свойства.

Я предлагаю использовать что-то вроде .data в jQuery, в котором метаданные привязаны к объектам. Если вы не хотите использовать библиотеку, повторно внедрите jQuery.data

Answer 2

Да, вы можете добавлять свои собственные свойства к объектам DOM, но не забывайте избегать именования коллизий и циклических ссылок.

document.getElementById("myElement").myProperty = "my value";

HTML5 ввел правильный способ присоединения данных к элементам через разметку - с использованием префикса атрибута data-. Вы можете использовать этот метод в документах HTML 4 без проблем, но они не будут проверяться:

<div id="myElement" data-myproperty="my value"></div>

К которым вы можете получить доступ через JavaScript, используя getAttribute():

document.getElementById("myElement").getAttribute("data-myproperty");

Answer 3

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

const wm = new WeakMap();
el = document.getElementById("myelement");
wm.set(el, "my value");
console.log(wm.get(el)); // "my value"

В отличие от других ответов, этот метод гарантирует, что никогда не будет конфликта с именем какого-либо свойства или данных.

Answer 4

Если в 2015 году кто-то задается вопросом, да, вы можете - и jQuery делает то же самое в данных .Просто выберите перспективные имена, такие как префиксы поставщиков или случайные суффиксы, основанные на времени (jQuery).

Answer 5

Хотите добавить свойства к объекту или атрибуты к элементу?

Вы можете добавить атрибуты, используя setAttribute

var el = document.getElementById('myelement');
el.setAttribute('custom', 'value');

, или вы можете просто добавить свойства кобъект javascript:

var el = document.getElementById('myelement');
el.myProperty = 'myValue';

Answer 6

Если необходимо, не используйте стандартные атрибуты HTML.Вот руководство по использованию пользовательских атрибутов:

http://www.javascriptkit.com/dhtmltutors/customattributes.shtml

Это HTML5, но оно обратно совместимо.