Metodo data

Il metodo data permette di associare dati di qualsiasi tipo agli elementi DOM in modo sicuro, evitando perdite di memoria. Possiamo impostare diversi valori per un elemento e recuperarli in seguito. L'uso del metodo data per aggiornare i dati non influisce sugli attributi nel DOM.

Sintassi

In questo modo impostiamo un valore per un elemento con una chiave, con cui potrà essere trovato successivamente:

.data(chiave, valore);

Possiamo anche passare un oggetto che contiene coppie chiave-valore per aggiornare i dati:

.data(oggetto);

Possiamo ottenere i dati associati al primo elemento nella collezione jQuery, passando solo la chiave:

.data(chiave);

Senza passare alcun parametro, possiamo leggere i dati precedentemente associati agli elementi DOM. Il metodo restituirà un oggetto JavaScript, contenente ogni valore come proprietà:

.data();

Esempio

Usiamo data per impostare i dati per il tag p, passando come primo parametro 'test' e il valore 21 come secondo. Poi leggiamo i dati salvati con la chiave 'test':

<p>testo</p>

$('p').data('test', 21); // qui i dati vengono scritti

console.log($('p').data('test')); // visualizzerà il numero 21
console.log($('p').data()); // visualizzerà l'oggetto {test: 21}

Vedi anche

metodo removeData,
che rimuove i dati da un elemento
metodo hasData,
che verifica la presenza di dati in un elemento
metodo attr,
che permette di ottenere e modificare qualsiasi attributo di un elemento
proprietà JavaScript dataset,
che permette di aggiungere attributi personalizzati ai tag