¿Almacena información arbitraria en tags HTML para JavaScript?

Una pregunta muy general.

Genero dinámicamente un formulario que se divide en varios niveles de tabs usando HTML / JavaScript.

Quiero resaltar algunos de los campos (aquellos que tienen un valor que difiere de una plantilla global) con un símbolo de estrella * usando CSS e imagen de fondo.

Un campo JS recorre cada campo, compara su valor y, si es necesario, establece una clase CSS para él. Hasta aquí todo bien.

Ahora, además, quiero que no solo se marque cada campo modificado con una estrella, sino también la pestaña en la que se encuentra.

Como me encanta, me gustaría almacenar el ID del elemento de la pestaña como un atributo en algún lugar de la etiqueta HTML de cada campo (algo así como “parentTab”). La función JS luego resalta el campo y su elemento “parentTab” (y tal vez también ese “parentTab”).

Mi primer enfoque es utilizar mal el atributo “título” o algo para almacenar parentTab. Por supuesto, eso es sucio. Sin embargo, si simplemente agrego atributos arbitrarios a la etiqueta DIV o INPUT, ya no validará más y me siento menos seguro accediendo a estos atributos. ¿Quién sabe cómo lo manejan los diferentes navegadores y lo manejará en el futuro?

Entonces mi pregunta es: ¿existe una forma válida y compatible con los estándares, un atributo de algún tipo, para almacenar datos arbitrarios dentro de tags HTML, para su posterior procesamiento por JavaScript?

Por supuesto, podría crear una matriz JS “parentTabs” y terminarla. Pero almacenarlo en la entrada en sí sería mucho más elegante.

Puede averiguar a qué elemento con tabs pertenece un campo escribiendo una función isChildOf, como esta: http://jimkeller.blogspot.com/2008/07/jquery-ischildof-is-element-child-of.html

Usar el DOM para resolver esto siempre será más “elegante” que duplicar los datos en algún formato personalizado.

con la introducción de html5, puede usar atributos que comiencen con data- , y aún así se validarán.

  

El atributo rel es a menudo una gran opción válida para almacenar datos como este.

En jQuery tienes la API de datos para el caso. http://docs.jquery.com/Internals/jQuery.data

Si no usa jQuery, puede agregar sus propias tags y almacenar cualquier cosa en él. todos te dirán que esto no es bueno, etc., pero todas las grandes firmas web lo están haciendo. entonces terminarás en una gran compañía 😉

Me gusta cómo lo hizo John Resig : una etiqueta de script con tipo arbitrario. Su ejemplo es sobre plantillas, pero realmente podrías usar esto para cualquier cosa.