Existe-t-il un bon moyen d'attacher des objets JavaScript à des éléments HTML?

96

Je souhaite associer un objet JavaScript à un élément HTML. Existe-t-il un moyen simple de le faire?

J'ai remarqué que HTML DOM définit une méthode setAttribute et il semble que cela soit défini pour un nom d'attribut arbitraire. Cependant, cela ne peut définir que des valeurs de chaîne. (Vous pouvez bien sûr l'utiliser pour stocker des clés dans un dictionnaire.)

Spécificités (bien que je sois surtout intéressé par la question générale):

Plus précisément, j'ai des éléments HTML représentant des nœuds dans un arbre et j'essaye d'activer le glisser-déposer, mais l'événement jQuery drop ne me donnera que les éléments glissés et déposés.

Le modèle normal pour obtenir des informations vers les gestionnaires d'événements semble être de créer les éléments HTML en même temps que vous créez des objets JavaScript, puis de définir des gestionnaires d'événements en fermant ces objets JavaScript - mais cela ne fonctionne pas très bien dans ce cas cas (je pourrais avoir un objet global qui se remplit quand un glissement commence ... mais cela semble légèrement désagréable).

javascript dom user47741
la source

Réponses:

44

Avez-vous regardé la méthode jQuery data () ? Vous pouvez affecter des objets complexes à l'élément si vous le souhaitez ou vous pouvez utiliser cette méthode pour contenir au moins une référence à un objet (ou à d'autres données).

Phil.Wheeler
la source
8
Merci: c'est à peu près ce que je cherchais. Il est intéressant de définir cette méthode jquery stocke les clés dans un dictionnaire global dans un attribut de chaîne sur chaque élément. Le nom de cet attribut de chaîne est généré aléatoirement lors du premier chargement de jquery. (Suggérant qu'il n'y a pas de bonne façon de faire, il n'y a pas de meilleure façon de le faire uniquement en utilisant le DOM)
user47741
6
Il est intéressant de noter que jQuery data() fonctionne en utilisant la réponse donnée par bobince, donc si vous n'utilisez pas déjà jquery, vous pouvez aussi bien l'utiliser.
Eamon Nerbonne
6
C'est drôle de voir comment je peux revenir sur cette réponse 6 ans plus tard et penser, "c'est une réponse très sous-optimale. @Bobince devrait avoir la réponse acceptée".
Phil.Wheeler
6
Il n'y a pas de balise jQuery dans cette question.
Michał Perłakowski le
111

Les objets JavaScript peuvent avoir des propriétés arbitraires qui leur sont assignées, vous n'avez rien de spécial à faire pour les autoriser. Cela inclut les éléments DOM; bien que ce comportement ne fasse pas partie du standard DOM, il a été le cas depuis les toutes premières versions de JavaScript et est totalement fiable.

var div= document.getElementById('nav');
div.potato= ['lemons', 3];
bobince
la source
5
@ tat.wright - Les propriétés arbitraires des éléments HTML dont il parle sont appelées propriétés Expando. Notez également que div.potato ne signifie pas div.getAttribute ("potato")
nickytonline
37
@Tim Down: alors ne le faites pas. Je ne vois pas pourquoi il n'est pas fiable - c'est comme dire que l'objet String n'est pas fiable, car vous pouvez le définir sur null.
simon
5
@TimDown: Mais la définition de jQuery.data ne document.expando = falsecassera- t -elle pas aussi?
Joey Adams
8
D'après mon expérience, la raison pour laquelle cela peut être mauvais est d'éventuelles fuites de mémoire. Il y a peut-être un moyen facile de l'éviter, mais lorsque j'ai fait une conception qui l'utilisait beaucoup, il y avait de nombreuses fuites de mémoire. Je pense que vous devez être très prudent car le comptage des références n'est pas géré pour vous (pas nettoyé) si l'élément est supprimé de la page, et probablement vice-versa.
eselk
7
Avertissement juste: je faisais volontiers ce que la réponse décrit, mais au lieu du nom de champ "potato", j'utilisais "scope". Il s'avère que "scope" est un attribut des éléments de cellule du tableau ( <td>) et que l'objet que j'ai assigné à ce champ était # toString'ed. J'étais très confus en voyant td.scope === '[objet objet]'.
David Groomes