Adakah cara yang baik untuk melampirkan objek JavaScript ke elemen HTML?

96

Saya ingin mengasosiasikan objek JavaScript dengan elemen HTML. Apakah ada cara sederhana untuk melakukan hal ini?

Saya melihat HTML DOM mendefinisikan metode setAttribute dan sepertinya ini didefinisikan untuk nama atribut arbitrer. Namun ini hanya dapat mengatur nilai string. (Anda tentu saja dapat menggunakan ini untuk menyimpan kunci ke dalam kamus.)

Spesifik (meskipun saya sangat tertarik dengan pertanyaan umum):

Secara khusus, saya memiliki elemen HTML yang mewakili node di pohon dan saya mencoba untuk mengaktifkan drag-and-drop, tetapi event jQuery drop hanya akan memberi saya elemen yang diseret dan dijatuhkan.

Pola normal untuk mendapatkan informasi ke penangan kejadian tampaknya untuk membuat elemen HTML pada saat yang sama saat Anda membuat objek JavaScript dan kemudian mendefinisikan penangan kejadian dengan menutup objek JavaScript ini - namun ini tidak bekerja terlalu baik dalam hal ini case (Saya bisa memiliki objek global yang terisi saat drag dimulai ... tapi ini terasa sedikit buruk).

javascript dom pengguna47741
sumber

Jawaban:

44

Pernahkah Anda melihat metode jQuery data () ? Anda dapat menetapkan objek kompleks ke elemen jika Anda mau atau Anda dapat memanfaatkan metode tersebut untuk menyimpan referensi ke objek (atau beberapa data lain) paling tidak.

Phil.Wheeler
sumber
8
Terima kasih: Ini cukup banyak yang saya cari. Menariknya untuk mendefinisikan metode ini, jquery menyimpan kunci ke dalam kamus global dalam atribut string pada setiap elemen. Nama atribut string ini dibuat secara acak saat jquery pertama kali dimuat. (Menyarankan bahwa tidak ada cara yang baik untuk melakukannya, tidak ada cara yang lebih baik untuk melakukan ini hanya dengan menggunakan DOM)
user47741
6
Perlu dicatat bahwa jQuery data() bekerja dengan menggunakan jawaban bobince yang diberikan jadi jika Anda belum menggunakan jquery, Anda mungkin juga menggunakannya.
Eamon Nerbonne
6
Lucu sekali bagaimana saya dapat melihat kembali jawaban ini 6 tahun kemudian dan berpikir, "ini adalah jawaban yang sangat kurang optimal. @Bobince seharusnya menerima jawaban yang diterima".
Phil.Wheeler
6
Tidak ada tag jQuery dalam pertanyaan ini.
Michał Perłakowski
111

Objek JavaScript dapat memiliki properti arbitrer yang ditetapkan padanya, tidak ada hal khusus yang harus Anda lakukan untuk mengizinkannya. Ini termasuk elemen DOM; meskipun perilaku ini bukan bagian dari standar DOM, itu adalah kasus kembali ke versi pertama JavaScript dan benar-benar dapat diandalkan.

var div= document.getElementById('nav');
div.potato= ['lemons', 3];
bobince
sumber
5
@ tat.wright - Properti sembarang pada elemen HTML yang dia bicarakan disebut properti Expando. Perhatikan juga bahwa div.potato tidak berarti div.getAttribute ("potato")
nickytonline
37
@ Tim Down: maka jangan lakukan itu. Saya gagal untuk melihat mengapa itu tidak dapat diandalkan - itu seperti mengatakan bahwa objek String tidak dapat diandalkan, karena Anda dapat mengaturnya ke null.
simon
5
@TimDown: Tapi tidak akan menetapkan document.expando = falseistirahat jQuery.data , juga?
Joey Adams
8
Dari pengalaman saya, alasan ini bisa menjadi buruk adalah kemungkinan kebocoran memori. Mungkin ada cara mudah untuk menghindarinya, tetapi ketika saya membuat desain yang sangat banyak menggunakan ini, banyak kebocoran memori. Saya pikir Anda harus ekstra hati-hati karena penghitungan referensi tidak ditangani untuk Anda (tidak dibersihkan) jika elemen dihapus dari halaman, dan mungkin sebaliknya.
eselk
7
Peringatan yang adil: Saya dengan senang hati melakukan apa yang dijelaskan oleh jawabannya, tetapi alih-alih menggunakan nama bidang "kentang", saya menggunakan "ruang lingkup". Ternyata "cakupan" adalah atribut elemen sel tabel ( <td>) dan objek yang saya tetapkan ke bidang ini # toString'ed. Saya sangat bingung melihat td.scope === '[Object Object]'.
David Groomes