Existe uma boa maneira de anexar objetos JavaScript a elementos HTML?

Quero associar um objeto JavaScript a um elemento HTML. Existe uma maneira simples de fazer isso?

Percebi que o HTML DOM define um método setAttribute e parece que isso é definido para um nome de atributo arbitrário. No entanto, isso só pode definir valores de string. (Você pode, obviamente, usar isso para armazenar as chaves em um dicionário.)

Especificidades (embora eu esteja mais interessado na questão geral):

Especificamente, tenho elementos HTML que representam nós em uma árvore e estou tentando habilitar arrastar e soltar, mas o evento de soltar do jQuery só me dará os elementos que estão sendo arrastados e soltos.

O padrão normal para obter informações para manipuladores de eventos parece ser criar os elementos HTML ao mesmo tempo que você está criando objetos JavaScript e, em seguida, definir os manipuladores de eventos fechando esses objetos JavaScript - no entanto, isso não funciona muito bem neste caso (eu poderia ter um objeto global que é preenchido quando um arrasto começa ... mas isso parece um pouco desagradável).

javascript dom user47741
fonte

Respostas:

Você já olhou para o método jQuery data () ? Você pode atribuir objetos complexos ao elemento se quiser ou pode aproveitar esse método para manter uma referência a um objeto (ou alguns outros dados) no mínimo.

Phil.Wheeler
fonte

Obrigado: isso é exatamente o que eu estava procurando. Curiosamente, para definir este método, o jquery armazena as chaves em um dicionário global em um atributo string em cada elemento. O nome deste atributo de string é gerado aleatoriamente quando jquery é carregado pela primeira vez. (Sugerindo que não há uma boa maneira de fazer, não há uma maneira mais agradável de fazer isso usando apenas o DOM)

user47741

É importante notar que o jQuery data() funciona usando a resposta que bobince deu, então se você ainda não estiver usando jquery, você também pode usar isso.

Eamon Nerbonne

Engraçado como posso olhar para trás e olhar para esta resposta 6 anos depois e pensar, "esta é uma resposta muito abaixo do ideal. @Bobince deveria ter a aceita".

Phil.Wheeler

Não há tag jQuery nesta questão.

Michał Perłakowski

111

Os objetos JavaScript podem ter propriedades arbitrárias atribuídas a eles, não há nada especial que você precise fazer para permitir isso. Isso inclui elementos DOM; embora esse comportamento não faça parte do padrão DOM, é o caso desde as primeiras versões do JavaScript e é totalmente confiável.

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

bobince
fonte

@ tat.wright - As propriedades arbitrárias nos elementos HTML de que ele está falando são chamadas de propriedades Expando. Observe também que div.potato não significa div.getAttribute ("potato")

nickytonline

@Tim Down: então não faça isso. Não consigo ver por que não é confiável - é como dizer que o objeto String não é confiável, porque você pode defini-lo como nulo.

simon

@TimDown: Mas a configuração de jQuery.data também não document.expando = falsequebra ?

Joey Adams

Pela minha experiência, o motivo pelo qual isso pode ser ruim são possíveis vazamentos de memória. Pode haver uma maneira fácil de evitá-lo, mas quando fiz um design que usava tanto, havia muitos vazamentos de memória. Acho que você deve ser extremamente cuidadoso porque a contagem de referências não é tratada para você (não limpa) se o elemento for removido da página e provavelmente vice-versa.

eselk

Aviso justo: eu estava feliz fazendo o que a resposta descreve, mas em vez do nome de campo "batata", usei "escopo". Acontece que "escopo" é um atributo dos elementos da célula da tabela ( <td>) e o objeto que atribuí a este campo era # toString'ed. Fiquei muito confuso ao ver td.scope === '[Object Object]'.

David Groomes