Realmente sí se puede, a partir de HTML 5 es posible usar la propiedad data-*
la cual:
Proporciona acceso de lectura / escritura a todos los atributos de
datos personalizados (data-*
) establecidos en el elemento. Este
acceso está disponible tanto en HTML como dentro del DOM. Es un mapa
de DOMString, una entrada para cada atributo de datos personalizados.
Tenga en cuenta que la propiedad del conjunto de datos se puede leer,
pero no escribir directamente. En cambio, todas las escrituras deben
ser para las propiedades individuales dentro del conjunto de datos,
que a su vez representan los atributos de datos. Tenga en cuenta
también que un atributo de datos HTML y su DOM dataset.property
correspondiente no comparten el mismo nombre, pero siempre son
similares.
Observa el siguiente input
:
<input id="ibxPersona"
data-dni="X123456"
data-ciudad="New York"
data-profesion="Informático"
value="John Doe" />
Aparte del tradicional value
, desde HTML 5 se puede agregar información adicional en la forma: data-identificador
, la cual se puede recuperar del modo siguiente: elemento.dataset.identificador
.
Pero la propiedad data-*
es mucho más poderosa. Nosotros podemos modificarla en tiempo de ejecución, borrando/modificando/agregando información.
Veamos en ejemplo:
/*Referencia al input*/
const ibxPersona = document.querySelector('#ibxPersona');
/*Referencia a todo el dataset por simplicidad*/
const dataPersona = ibxPersona.dataset;
/*Valores que ya existen*/
var personaDNI = dataPersona.dni;
var personaCiudad = dataPersona.ciudad;
var personaProfesion = dataPersona.profesion;
console.log("DNI:\t" + personaDNI);
console.log("Ciudad:\t" + personaCiudad);
console.log("Prof:\t" + personaProfesion);
/*Se le puede agregar información de forma dinámica*/
dataPersona.java = true;
console.log("Ahora " + ibxPersona.value + " aprendió Java: " + dataPersona.java);
/*Se le puede quitar información*/
delete dataPersona.profesion;
/*Se puede modificar información*/
dataPersona.profesion=personaProfesion+", Escritor";
/*Cómo se muestra el data set*/
console.log(dataPersona);
<input id="ibxPersona" data-dni="X123456" data-ciudad="New York" data-profesion="Informático" value="John Doe" />
Cabe decir que antes de data*
uno podía recurrir a ciertos trucos para pasar varios elementos, lo cual era muy útil en algunos casos. Pero esta nueva funcionalidad hace que eso sea historia.
En la prehistoria una podía hacer cosas así:
<select name="selTest">
<option value="3|5|8">Opc 1</option>
<option value="2|4|6">Opc 2</option>
</select>
Aquí el value
me estaba sirviendo para pasar tres valores en uno.