¿Puedo agregar propiedades arbitrarias a los objetos DOM de JavaScript, como los elementos <INPUT> o <SELECT>? O, si no puedo hacer eso, ¿hay alguna manera de asociar mis propios objetos con los elementos de la página a través de una propiedad de referencia?¿Puedo agregar propiedades arbitrarias a objetos DOM?
Claro, la gente lo ha estado haciendo por años. No se recomienda ya que es complicado y puede meterse con las propiedades existentes.
Si está bucleando el código con for..in, su código se puede romper porque ahora va a enumerar a través de estas propiedades recién conectadas.
Sugiero usar algo como jQuery's .data que mantiene los metadatos unidos a los objetos. Si no desea utilizar una biblioteca, vuelva a implementar jQuery.data
Sí, puede agregar sus propias propiedades a los objetos DOM, pero recuerde tener cuidado para evitar el nombramiento de colisiones y referencias circulares.
document.getElementById("myElement").myProperty = "my value";
HTML5 introdujo una forma válida de adjuntar datos a los elementos a través de la markup - utilizando el prefijo data- atributo. Puede utilizar este método en HTML 4 documentos sin problemas también, pero no validará:
<div id="myElement" data-myproperty="my value"></div>
que se puede acceder a través de JavaScript usando getAttribute():
document.getElementById("myElement").getAttribute("data-myproperty");
¿Debería esa última línea ser 'setAttribute()'? – alex
@alex: no, cometió un error aunque :-) –
data- attributes solo puede almacenar cadenas (u objetos serializables/deserializables a/desde cadenas), no objetos de tiempo de ejecución generales, mientras que establecer una nueva propiedad en un objeto dom puede hacerlo. – Triynko
¿Quieres añadir propiedades a el objeto o atributos del elemento?
Puede añadir atributos usando setAttribute
var el = document.getElementById('myelement');
el.setAttribute('custom', 'value');
o simplemente puede agregar propiedades al objeto javascript:
var el = document.getElementById('myelement');
el.myProperty = 'myValue';
Si debe, no utilizar atributos HTML estándar. Aquí hay un tutorial sobre el uso de los atributos personalizados:
http://www.javascriptkit.com/dhtmltutors/customattributes.shtml
Es HTML5, pero es compatible con versiones anteriores.
En caso de que alguien se pregunte en 2015, sí, puede - y jQuery está haciendo exactamente eso en data. Simplemente elija nombres a prueba de futuro como prefijos de proveedor o sufijos aleatorios basados en tiempo (jQuery).
Genial ... ¿'jQuery utiliza' datos' o puedo asignarle algún valor? –
'$ .data' está definido por jQuery. Lo usaría como '$ ('# el'). Data ('clave', 'valor')'. –
Es '$ (elemento) .data ('nombre', valor)' para establecer un valor, y '$ (elemento) .data ('nombre')' para leerlo. –