Perbedaan antara Atribut HTML dan Properti DOM

Perbedaan antara atribut HTML dan properti DOM

Atribut HTML dan properti DOM pada dasarnya adalah hal yang berbeda. Keduanya bisa memiliki atribut dan properti dengan nama yang sama, tetapi dapat diatur ke nilai yang berbeda.

• Perbedaan utama antara atribut dan properti

  • Serialisasi HTML: atribut diserialisasikan ke HTML, tetapi properti tidak
  • Tipe nilai: nilai atribut selalu berupa string, sedangkan properti bisa berupa tipe apa pun
  • Peka huruf besar/kecil: nama atribut tidak peka huruf besar/kecil, tetapi nama properti peka huruf besar/kecil. Namun, nilai atribut tetap peka huruf besar/kecil

• Reflection

  • Demi kemudahan, sebagian besar spesifikasi membuat padanan properti untuk semua atribut yang didefinisikan
  • Saat sebuah atribut merefleksikan properti, atribut menjadi sumber data. Jika atribut diatur, propertinya ikut diperbarui, dan saat dibaca dari properti, yang dibaca adalah atributnya
  • Namun, beberapa reflektor lebih kompleks. Terkadang nama atribut dan nama properti yang direfleksikannya juga berbeda

• Validasi, type coercion, dan nilai default

  • Atribut memiliki validasi dan nilai default, tetapi properti tidak
  • Beberapa properti melakukan type coercion

• value pada field input

  • Ada atribut value dan properti value, tetapi properti value tidak merefleksikan atribut value. Sebaliknya, properti defaultValue merefleksikan atribut value
  • Properti value tidak merefleksikan atribut apa pun. Ini bukan hal yang langka; banyak properti lain seperti offsetWidth, parentNode, dan sebagainya juga demikian
  • Properti value pada awalnya mengikuti properti defaultValue. Setelah itu, ketika properti value diatur lewat JavaScript atau interaksi pengguna, nilainya beralih ke nilai internal

• Atribut seharusnya untuk konfigurasi

  • Atribut seharusnya digunakan untuk konfigurasi, sedangkan properti seharusnya dapat menyimpan state
  • Pohon light-DOM seharusnya memiliki satu pemilik tunggal
  • Elemen <details> dan <dialog> menampilkan state open dengan atribut open, dan browser menambahkan/menghapus atribut ini sendiri sebagai respons terhadap interaksi pengguna. Ini dianggap sebagai kesalahan desain

• Cara framework menangani perbedaan ini

  • Preact dan VueJS akan mengatur prop sebagai properti jika propName in element, dan jika tidak maka akan mengatur atribut. Mereka lebih memilih properti daripada atribut
  • React melakukan kebalikannya. React akan mengatur atribut, kecuali untuk kasus-kasus yang telah ditentukan sebelumnya yang lebih memilih properti
  • lit-html mempertahankan pembedaan antara atribut dan properti, dan untuk mengatur properti alih-alih atribut, nama harus diawali dengan .

Pendapat GN⁺

• Mengetahui perbedaan antara atribut HTML dan properti DOM penting saat bekerja dengan DOM tingkat rendah. Dalam kebanyakan kasus perbedaannya tidak besar, tetapi saat menggunakan framework perlu lebih berhati-hati

• Tampaknya lebih baik membedakan bahwa atribut merepresentasikan configuration, sedangkan properti merepresentasikan state. Sayangnya, beberapa elemen HTML belakangan ini tidak mengikuti prinsip ini

• Khususnya saat menggunakan custom element di React, perlu berhati-hati. React menetapkan properti custom element sebagai atribut, bukan properti, sehingga hal-hal yang hanya mendukung properti mungkin tidak berfungsi. Ini dijadwalkan membaik di React 19

• Menarik juga untuk membandingkan bagaimana framework besar seperti Preact, Vue, React, dan lit-html menangani atribut dan properti. Filosofi dan keputusan desain masing-masing framework tercermin di sana

• Standar web dan implementasi browser tidak selalu ramah pengembang. Kasus atribut dan properti value pada elemen <input> adalah contoh yang mewakili. Karena kompatibilitas ke belakang, sepertinya sulit untuk mengubahnya dengan mudah, tetapi semoga ke depannya desainnya bisa lebih konsisten

[superwoou]

https://emewjin.github.io/html-attribute-dom-property/

[superwoou]

attribute dan property ternyata diterjemahkan sama-sama sebagai "atribut"..