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

3 minutos de lectura

avatar de usuario
usuario47741

Quiero asociar un objeto JavaScript con un elemento HTML. ¿Hay una manera simple de hacer esto?

Me di cuenta de DOM HTML define un método setAttribute y parece que 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).

Detalles específicos (aunque estoy más 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 están arrastrando y soltando.

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 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).

Los objetos de JavaScript pueden tener propiedades arbitrarias asignadas a ellos, no hay nada especial que deba 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];

  • @ tat.wright: las propiedades arbitrarias en los elementos HTML de los que habla se denominan propiedades Expando. También tenga en cuenta que div.potato no significa div.getAttribute(“potato”)

    – nickytonline

    10 de septiembre de 2009 a las 3:24

  • @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.

    – Simón

    10 de septiembre de 2009 a las 10:52

  • @TimDown: Pero no configurará document.expando = false descanso jQuery.datos¿también?

    –Joey Adams

    4 de abril de 2012 a las 16:44


  • Desde mi experiencia, la razón por la que esto puede ser malo es por posibles fugas de memoria. Puede haber una manera fácil de evitarlo, pero cuando hice un diseño que usaba esto en gran medida, tenía muchas pérdidas de memoria. Creo que debe tener mucho cuidado porque el conteo de referencias no se maneja (no se limpia) si el elemento se elimina de la página, y probablemente viceversa.

    – eselk

    29 de enero de 2013 a las 16:32

  • 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 tabla (<td>) y el objeto que asigné a este campo fue #toString’ed. Estaba muy confundido al ver td.scope === ‘[object Object]’.

    – David Groomes

    5 de noviembre de 2015 a las 21:53

avatar de usuario
Phil Wheeler

¿Has mirado el datos jQuery() ¿método? 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.

  • Gracias: Esto es más o menos lo que estaba buscando. Curiosamente, para definir este método, jquery almacena claves en un diccionario global en un atributo de cadena en cada elemento. El nombre de este atributo de cadena se genera aleatoriamente cuando jquery se carga por primera vez. (Lo que sugiere que no hay una buena manera de hacerlo, no hay una mejor manera de hacerlo solo usando el DOM)

    – usuario47741

    10 de septiembre de 2009 a las 0:14

  • Vale la pena señalar que jQuery data() obras usando la respuesta que dio bobince, así que si aún no está usando jquery, también podría usar eso.

    – Eamon Nerbonné

    30 de enero de 2014 a las 13:31


  • 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

    30/03/2015 a las 21:49

  • No hay una etiqueta jQuery en esta pregunta.

    – Michał Perłakowski

    2 de enero de 2016 a las 10:25

¿Ha sido útil esta solución?