Gibt es eine gute Möglichkeit, JavaScript-Objekte an HTML-Elemente anzuhängen?

Ich möchte ein JavaScript-Objekt einem HTML-Element zuordnen. Gibt es eine einfache Möglichkeit, dies zu tun?

Ich habe festgestellt, dass HTML DOM eine setAttribute-Methode definiert und anscheinend für einen beliebigen Attributnamen definiert ist. Dies kann jedoch nur Zeichenfolgenwerte festlegen. (Sie können dies natürlich verwenden, um Schlüssel in einem Wörterbuch zu speichern.)

Besonderheiten (obwohl ich hauptsächlich an der allgemeinen Frage interessiert bin):

Insbesondere habe ich HTML-Elemente, die Knoten in einem Baum darstellen, und ich versuche, Drag & Drop zu aktivieren, aber das jQuery-Drop-Ereignis gibt mir nur die Elemente, die gezogen und abgelegt werden.

Das normale Muster zum Abrufen von Informationen an Ereignishandler scheint darin zu bestehen, die HTML-Elemente gleichzeitig mit dem Erstellen von JavaScript-Objekten zu erstellen und dann Ereignishandler durch Schließen über diese JavaScript-Objekte zu definieren. Dies funktioniert jedoch nicht so gut case (Ich könnte ein globales Objekt haben, das gefüllt wird, wenn ein Ziehen beginnt ... aber das fühlt sich etwas böse an).

javascript dom

— user47741
quelle

Antworten:

Haben Sie sich die Methode jQuery data () angesehen ? Sie können dem Element komplexe Objekte zuweisen, wenn Sie möchten, oder Sie können diese Methode nutzen, um zumindest einen Verweis auf ein Objekt (oder andere Daten) zu speichern.

— Phil.Wheeler
quelle

Danke: Das ist so ziemlich das, wonach ich gesucht habe. Interessanterweise speichert jquery zur Definition dieser Methode Schlüssel in einem globalen Wörterbuch in einem Zeichenfolgenattribut für jedes Element. Der Name dieses Zeichenfolgenattributs wird zufällig generiert, wenn jquery zum ersten Mal geladen wird. (Es gibt keinen besseren Weg, dies zu tun. Es gibt keinen schöneren Weg, dies nur mit dem DOM zu tun.)

— user47741

Es ist erwähnenswert, dass jQuery data() Arbeiten durch die Verwendung Antwort bobince gab also , wenn Sie nicht bereits jQuery verwenden, können Sie auch diese verwenden.

— Eamon Nerbonne

Komisch, wie ich 6 Jahre später auf diese Antwort zurückblicken und denken kann: "Dies ist eine sehr suboptimale Antwort. @Bobince sollte die akzeptierte haben."

— Phil.Wheeler

In dieser Frage gibt es kein jQuery-Tag.

— Michał Perłakowski

111

JavaScript-Objekten können beliebige Eigenschaften zugewiesen werden. Sie müssen nichts Besonderes tun, um dies zuzulassen. Dies schließt DOM-Elemente ein; Obwohl dieses Verhalten nicht Teil des DOM-Standards ist, wurde es bereits in den ersten Versionen von JavaScript verwendet und ist absolut zuverlässig.

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

— Bobince
quelle

@ tat.wright - Die willkürlichen Eigenschaften von HTML-Elementen, von denen er spricht, werden als Expando-Eigenschaften bezeichnet. Beachten Sie auch, dass div.potato nicht div.getAttribute ("Kartoffel") bedeutet

— nickytonline

@ Tim Down: dann mach es einfach nicht. Ich verstehe nicht, warum es nicht zuverlässig ist - es ist so, als würde man sagen, dass das String-Objekt unzuverlässig ist, weil man es auf null setzen kann.

— Simon

@ TimDown: Aber wird document.expando = falsebreak jQuery.data nicht auch gesetzt?

— Joey Adams

Aus meiner Erfahrung ist der Grund, warum dies schlecht sein kann, mögliche Speicherlecks. Es mag einen einfachen Weg geben, dies zu vermeiden, aber als ich ein Design erstellte, das dies stark nutzte, gab es viele Speicherlecks. Ich denke, Sie müssen besonders vorsichtig sein, da die Referenzzählung für Sie nicht durchgeführt wird (nicht bereinigt), wenn das Element von der Seite entfernt wird, und wahrscheinlich auch umgekehrt.

— Eselk

Faire Warnung: Ich habe gerne getan, was in der Antwort beschrieben wird, aber anstelle des Feldnamens "Kartoffel" habe ich "Umfang" verwendet. Es stellt sich heraus, dass "scope" ein Attribut von Tabellenzellenelementen ( <td>) ist und das Objekt, das ich diesem Feld zugewiesen habe, # toString'ed war. Ich war sehr verwirrt, als ich td.scope === '[Objekt Objekt]' sah.

— David Groomes