JavaScript: estendere gli elementi DOM con dati custom

Gli elementi del DOM sono oggetti. Come tali possono essere estesi aggiungendo loro proprietà e metodi. Questo è reso possibile dalla natura dinamica degli oggetti JavaScript.

Definiamo un wrapper con tre metodi:

1. setData() - aggiunge una proprietà all'elemento
2. getData() - reperisce una proprietà dell'elemento
3. hasData() - verifica se un elemento ha una proprietà.

Ecco il codice:

var Data = {
	setData: function(element, name, value) {
		element[name] = value;
	},
	getData: function(element, name) {
		var data;
		for (var prop in element) {
			if (prop == name) {
				data = element[prop];
			}
		}
		return data;
	},
	hasData: function(element, name) {
		for (var prop in element) {
			if (prop == name) {
				return true;
			}
		}
		return false;
	}
};

Esempio:

var test = document.getElementById('test');

Data.setData(test, 'foo', 1);
console.log(Data.getData(test, 'foo')); // 1
console.log(Data.hasData(test, 'foo')); // true