Дополнить элемент DOM

Question

Можно ли дополнить элемент DOM, добавив к нему новое свойство как добавление обычного объекта JavaScript?Например, можем ли мы добавить новое свойство кнопки или ввода, скажем, значение, которое указывает, когда пользователь последний раз нажимал на него?

Answer 1

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

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

Например, это может привести к утечке памяти, поскольку между объектами DOM и javascript существует циклическая ссылка:

var myJsObj = {};
var myDomElt = document.getElementById('myId');
myJsObj.domElt = myDomElt;
myDomElt.jsObj = myJsObj;

Однако безопасно добавить свойство, которое просто содержит примитивное значение:

myDomElt.fullTitle = "My DOM Element";

Хотя предупреждение о том, что стандарт DOM может измениться, все еще важно; Что если HTML7 определяет свойство fullTitle для элементов DOM? Ваш сайт будет иметь непредсказуемое поведение.

Альтернативой является использование функции $. Data в jQuery :

$(myDomElt).data('fullTitle', 'My Dom Element');
var retrieved = $(myDomElt).data('fullTitle');

Answer 2

Возможно, но действительно плохая идея . В ответе Дэниела Эрвикера упоминаются некоторые причины, по которым это плохая идея. Я бы добавил это:

• Узлы DOM являются хост-объектами, и хост-объекты могут делать то, что им нравится. В частности, в спецификации ECMAScript для хост-объектов нет требования разрешать такое расширение, поэтому браузеры не обязаны разрешать это. В частности, новые браузеры могут отказаться, а существующий код, использующий его, сломается.
• Не все хост-объекты в существующих браузерах позволяют это. Например, текстовые узлы и все объекты ActiveX (такие как XMLHttpRequest в старых версиях IE и XMLDOM объекты, используемые для синтаксического анализа XML) в IE не изменяются, и поведение сбоя варьируется от выдачи ошибок до сбоя без вывода сообщений.
• В IE возможность добавления свойств можно отключить для всего документа, включая все узлы в документе, с помощью строки document.expando = false;. Таким образом, если какой-либо код на вашей странице будет содержать эту строку, весь код, основанный на добавлении свойств к узлам DOM, не будет работать.