Método data

El método data permite vincular datos de cualquier tipo a elementos DOM de forma segura, evitando fugas de memoria. Podemos establecer varios valores diferentes para un elemento y obtenerlos más tarde. El uso del método data para actualizar datos no afecta a los atributos en el DOM.

Sintaxis

Así establecemos un valor para un elemento con una clave, por la cual se podrá encontrar más tarde:

.data(clave, valor);

También podemos pasar un objeto que contenga pares clave-valor para actualizar los datos:

.data(objeto);

Se pueden obtener los datos asociados con el primer elemento en la colección jQuery pasando solo la clave:

.data(clave);

Sin pasar ningún parámetro, podemos leer los datos previamente vinculados a los elementos DOM. El método devolverá un objeto JavaScript, que contiene cada valor como propiedad:

.data();

Ejemplo

Usemos data para establecer datos para la etiqueta p, pasando como primer parámetro 'test' y el valor 21 como segundo. Luego leamos los datos guardados con la clave 'test':

<p>texto</p>

$('p').data('test', 21); // aquí se escriben los datos

console.log($('p').data('test')); // mostrará el número 21
console.log($('p').data()); // mostrará el objeto {test: 21}

Véase también

método removeData,
que elimina datos del elemento
método hasData,
que verifica la presencia de datos en el elemento
método attr,
que permite obtener y cambiar cualquier atributo del elemento
Propiedad JavaScript dataset,
que permite agregar atributos personalizados a las etiquetas