Jquery: differenza metodo data e attr

Mi è capitato di aver a che fare con uno script che fa un uso massivo dell’attributo data ed ho pensato di riportarne alcune differenze tra due metodi di jQuery ( data() e attr() ).

La differenza principale è sul dove viene immagazzinato il dato e come ci si accede.

Attr:

  • memorizza le informazioni direttamente sull’elemento e sono pubblicamente visibili su controllo, ed anche che sono disponibili presso API native dell’elemento;
  • accessibile da $(element).attr(‘data-name’);
  • accessibile da element.getAttribute(‘data-name’);
  • se il valore era sotto forma di “data-name”  accessibile anche da $(element).data(name) e element.dataset[‘name’] e element.dataset.name;
  • visibile sull’elemento previo controllo;
  • non possono essere oggetti.

Data:

  • si trova in un ambiente chiuso sopra variabile locale chiamata data_user, che è un esempio di una funzione di dati definiti a livello locale. Questa variabile non è accessibile dall’esterno di jQuery direttamente.
  • accessibile  solo  da parte di .data(name);
  • non accessibile da .attr();
  • non visibile pubblicamente sull’elemento al momento dell’ispezione;
  • può essere oggetti.