¿Existe una buena forma de adjuntar objetos JavaScript a elementos HTML?

96

Quiero asociar un objeto JavaScript con un elemento HTML. ¿Existe una forma sencilla de hacer esto?

Noté que HTML DOM define un método setAttribute y parece que esto está definido para un nombre de atributo arbitrario. Sin embargo, esto solo puede establecer valores de cadena. (Por supuesto, puede usar esto para almacenar claves en un diccionario).

Específicos (aunque estoy principalmente interesado en la pregunta general):

Específicamente, tengo elementos HTML que representan nodos en un árbol y estoy tratando de habilitar la función de arrastrar y soltar, pero el evento jQuery drop solo me dará los elementos que se arrastran y sueltan.

El patrón normal para llevar información a los controladores de eventos parece ser crear los elementos HTML al mismo tiempo que crea objetos JavaScript y luego definir los controladores de eventos cerrando estos objetos JavaScript; sin embargo, esto no funciona muy bien en este caso (podría tener un objeto global que se llena cuando comienza un arrastre ... pero esto se siente un poco desagradable).

usuario47741
fuente

Respuestas:

44

¿Ha mirado el método jQuery data () ? Puede asignar objetos complejos al elemento si lo desea o puede aprovechar ese método para mantener una referencia a un objeto (o algunos otros datos) como mínimo.

Phil.Wheeler
fuente
8
Gracias: esto es más o menos lo que estaba buscando. Curiosamente, para definir este método, jquery almacena las claves en un diccionario global en un atributo de cadena en cada elemento. El nombre de este atributo de cadena se genera aleatoriamente cuando se carga jquery por primera vez. (Sugerir que no hay una buena manera de hacerlo, no hay una mejor manera de hacerlo solo usando el DOM)
user47741
6
Vale la pena señalar que jQuery data() funciona al usar la respuesta que dio bobince, por lo que si aún no está usando jquery, también puede usar eso.
Eamon Nerbonne
6
Es curioso cómo puedo mirar hacia atrás en esta respuesta 6 años después y pensar, "esta es una respuesta muy subóptima. @Bobince debería tener la aceptada".
Phil.Wheeler
6
No hay una etiqueta jQuery en esta pregunta.
Michał Perłakowski
111

Los objetos JavaScript pueden tener asignadas propiedades arbitrarias, no hay nada especial que tenga que hacer para permitirlo. Esto incluye elementos DOM; aunque este comportamiento no es parte del estándar DOM, ha sido el caso desde las primeras versiones de JavaScript y es totalmente confiable.

var div= document.getElementById('nav');
div.potato= ['lemons', 3];
bobince
fuente
5
@ tat.wright - Las propiedades arbitrarias de los elementos HTML de los que habla se denominan propiedades Expando. También tenga en cuenta que div.potato no significa div.getAttribute ("papa")
nickytonline
37
@Tim Down: entonces simplemente no lo hagas. No veo por qué no es confiable, es como decir que el objeto String no es confiable, porque puede establecerlo en nulo.
Simon
5
@TimDown: ¿Pero la configuración no document.expando = falseromperá jQuery.data también?
Joey Adams
8
Según mi experiencia, la razón por la que esto puede ser malo son las posibles pérdidas de memoria. Puede que haya una forma fácil de evitarlo, pero cuando hice un diseño que usaba tanto, tenía muchas pérdidas de memoria. Creo que debe tener mucho cuidado porque el recuento de referencias no se maneja por usted (no se limpia) si el elemento se elimina de la página, y probablemente viceversa.
eselk
7
Advertencia justa: estaba haciendo felizmente lo que describe la respuesta, pero en lugar del nombre de campo "papa" estaba usando "alcance". Resulta que "alcance" es un atributo de los elementos de celda de la tabla ( <td>) y el objeto que asigné a este campo fue # toString'ed. Estaba muy confundido al ver td.scope === '[object Object]'.
David Groomes