C'è un buon modo per allegare oggetti JavaScript agli elementi HTML?

Voglio associare un oggetto JavaScript a un elemento HTML. C'è un modo semplice per fare questo?

Ho notato che HTML DOM definisce un metodo setAttribute e sembra che questo sia definito per il nome dell'attributo arbitrario. Tuttavia, questo può solo impostare valori di stringa. (Puoi ovviamente usarlo per memorizzare le chiavi in un dizionario.)

Specifiche (anche se sono principalmente interessato alla domanda generale):

In particolare, ho elementi HTML che rappresentano i nodi in un albero e sto cercando di abilitare il drag-and-drop, ma l'evento jQuery drop mi darà solo gli elementi trascinati e rilasciati.

Il modello normale per ottenere informazioni ai gestori di eventi sembra essere quello di creare gli elementi HTML contemporaneamente alla creazione di oggetti JavaScript e quindi di definire i gestori di eventi chiudendo su questi oggetti JavaScript - tuttavia questo non funziona troppo bene in questo caso (potrei avere un oggetto globale che viene popolato quando inizia un trascinamento ... ma questo sembra leggermente sgradevole).

javascript dom

— user47741
fonte

Risposte:

Hai esaminato il metodo jQuery data () ? Puoi assegnare oggetti complessi all'elemento se lo desideri o puoi sfruttare quel metodo per mantenere un riferimento a un oggetto (o ad altri dati) come minimo.

— Phil.Wheeler
fonte

Grazie: questo è più o meno quello che stavo cercando. È interessante notare che per definire questo metodo jquery memorizza le chiavi in un dizionario globale in un attributo stringa su ogni elemento. Il nome di questo attributo di stringa viene generato casualmente al primo caricamento di jquery. (Suggerendo che non c'è un buon modo per farlo, non c'è un modo migliore per farlo solo usando il DOM)

— user47741

Vale la pena notare che jQuery data() funziona usando la risposta fornita da bobince, quindi se non stai già usando jquery, potresti anche usarlo.

— Eamon Nerbonne

Divertente come posso guardare indietro a questa risposta 6 anni dopo e pensare, "questa è una risposta molto subottimale. @Bobince dovrebbe avere quella accettata".

— Phil.Wheeler

Non ci sono tag jQuery in questa domanda.

— Michał Perłakowski

111

Agli oggetti JavaScript possono essere assegnate proprietà arbitrarie, non c'è niente di speciale che devi fare per consentirlo. Questo include elementi DOM; sebbene questo comportamento non faccia parte dello standard DOM, è stato il caso risalendo alle primissime versioni di JavaScript ed è totalmente affidabile.

var div= document.getElementById('nav');
div.potato= ['lemons', 3];

— bobince
fonte

@ tat.wright - Le proprietà arbitrarie sugli elementi HTML di cui sta parlando sono chiamate proprietà Expando. Nota anche che div.potato non significa div.getAttribute ("potato")

— nickytonline

@Tim Down: quindi non farlo. Non riesco a capire perché non sia affidabile - è come dire che l'oggetto String non è affidabile, perché puoi impostarlo su null.

— simon

@TimDown: Ma non impostare anche document.expando = falsebreak jQuery.data ?

— Joey Adams

Dalla mia esperienza, il motivo per cui questo può essere negativo sono le possibili perdite di memoria. Potrebbe esserci un modo semplice per evitarlo, ma quando ho realizzato un progetto che lo utilizzava pesantemente, c'erano molte perdite di memoria. Penso che devi stare molto attento perché il conteggio dei riferimenti non viene gestito per te (non ripulito) se l'elemento viene rimosso dalla pagina, e probabilmente viceversa.

— eselk

Giusto avvertimento: stavo facendo felicemente ciò che descrive la risposta, ma invece del nome del campo "patata" stavo usando "ambito". Si scopre che "scope" è un attributo degli elementi della cella della tabella ( <td>) e l'oggetto che ho assegnato a questo campo era # toString'ed. Ero molto confuso vedendo td.scope === '[Object Object]'.

— David Groomes,