Setelah perubahan yang dibuat pada jQuery 1.6.1, saya telah mencoba untuk mendefinisikan perbedaan antara properti dan atribut dalam HTML.

Melihat daftar pada catatan rilis jQuery 1.6.1 (di dekat bagian bawah), tampaknya orang dapat mengklasifikasikan properti dan atribut HTML sebagai berikut:

• Properti: Semua yang memiliki nilai boolean atau yang dihitung UA sepertiIndex yang dipilih.

• Atribut: 'Atribut' yang dapat ditambahkan ke elemen HTML yang bukan boolean atau mengandung nilai yang dihasilkan UA.

Pikiran?

Saat menulis kode sumber HTML, Anda dapat menentukan atribut pada elemen HTML Anda. Kemudian, setelah browser mem-parsing kode Anda, simpul DOM yang sesuai akan dibuat. Node ini adalah objek, dan karenanya memiliki properti .

Misalnya, elemen HTML ini:

<input type="text" value="Name:">

memiliki 2 atribut ( typedan value).

Setelah browser mem-parsing kode ini, objek HTMLInputElement akan dibuat, dan objek ini akan berisi puluhan properti seperti: terima, accessKey, luruskan, alt, atribut, autofocus, baseURI, dicentang, childElementCount, childNodes, anak-anak, classList, className, clientTinggi, dll.

Untuk objek DOM node tertentu, properti adalah properti dari objek itu, dan atribut adalah elemen dari attributesproperti objek itu.

Saat simpul DOM dibuat untuk elemen HTML tertentu, banyak propertinya terkait dengan atribut dengan nama yang sama atau mirip, tetapi itu bukan hubungan satu-ke-satu. Misalnya, untuk elemen HTML ini:

<input id="the-input" type="text" value="Name:">

DOM node yang sesuai akan memiliki id, typedan valueproperti (antara lain):

• The idproperti adalah properti tercermin untuk idatribut: Mendapatkan properti membaca nilai atribut, dan pengaturan properti menulis nilai atribut. idadalah properti murni yang tercermin, tidak mengubah atau membatasi nilai.

• The typeproperti adalah properti tercermin untuk typeatribut: Mendapatkan properti membaca nilai atribut, dan pengaturan properti menulis nilai atribut. typebukan properti yang dipantulkan murni karena terbatas pada nilai yang diketahui (misalnya, jenis input yang valid). Jika Anda pernah <input type="foo">, maka theInput.getAttribute("type")beri Anda "foo"tetapi theInput.typememberi Anda "text".

• Sebaliknya, valueproperti tidak mencerminkan valueatribut. Sebaliknya, ini adalah nilai input saat ini. Ketika pengguna mengubah nilai kotak input secara manual, valueproperti akan mencerminkan perubahan ini. Jadi jika pengguna memasukkan "John"ke dalam kotak input, maka:

  theInput.value // returns "John"

  sedangkan:

  theInput.getAttribute('value') // returns "Name:"

  The valueproperti mencerminkan saat teks-konten di dalam kotak input, sedangkan valueatribut berisi awal teks-isi valueatribut dari kode sumber HTML.

  Jadi, jika Anda ingin tahu apa yang ada di dalam kotak teks, baca properti. Namun, jika Anda ingin tahu apa nilai awal kotak teks itu, baca atributnya. Atau Anda dapat menggunakan defaultValueproperti, yang merupakan refleksi murni dari valueatribut:

  theInput.value                 // returns "John"
  theInput.getAttribute('value') // returns "Name:"
  theInput.defaultValue          // returns "Name:"

Ada beberapa sifat yang secara langsung mencerminkan atribut mereka ( rel, id), beberapa refleksi langsung dengan nama yang sedikit-yang berbeda ( htmlFormencerminkan foratribut, classNamemencerminkan classatribut), banyak yang mencerminkan atribut mereka tetapi dengan pembatasan / modifikasi ( src, href, disabled, multiple), dan sebagainya di. Spesifikasinya mencakup berbagai jenis refleksi.

Setelah membaca jawaban Sime Vidas , saya mencari lebih banyak dan menemukan penjelasan yang sangat mudah dan mudah dipahami dalam dokumen sudut .

Atribut HTML vs. properti DOM

---

Atribut didefinisikan oleh HTML. Properti didefinisikan oleh DOM (Document Object Model).

• Beberapa atribut HTML memiliki pemetaan 1: 1 ke properti. idadalah salah satu contohnya.

• Beberapa atribut HTML tidak memiliki properti yang sesuai. colspanadalah salah satu contohnya.

• Beberapa properti DOM tidak memiliki atribut yang sesuai. textContent adalah salah satu contohnya.

• Banyak atribut HTML muncul untuk dipetakan ke properti ... tetapi tidak dengan cara yang Anda pikirkan!

Kategori terakhir itu membingungkan sampai Anda memahami aturan umum ini:

Atribut menginisialisasi properti DOM dan kemudian mereka selesai. Nilai properti dapat berubah; nilai atribut tidak bisa.

Misalnya, ketika browser merender <input type="text" value="Bob">, ia membuat simpul DOM yang sesuai dengan valueproperti yang diinisialisasi ke "Bob".

Ketika pengguna memasukkan "Sally" ke dalam kotak input, value properti elemen DOM menjadi "Sally". Tetapi value atribut HTML tetap tidak berubah ketika Anda menemukan jika Anda bertanya elemen input tentang atribut itu: input.getAttribute('value')mengembalikan "Bob".

Atribut HTML valuemenentukan nilai awal ; value properti DOM adalah nilai saat ini .

---

The disabledatribut contoh lain yang aneh. disabledProperti tombol falsesecara default sehingga tombol diaktifkan. Saat Anda menambahkan disabledatribut, keberadaannya sendiri yang menginisialisasi disabledproperti truetombol sehingga tombol dinonaktifkan.

Menambah dan menghapus disabledatribut menonaktifkan dan mengaktifkan tombol. Nilai atribut tidak relevan, itulah sebabnya Anda tidak dapat mengaktifkan tombol dengan menulis<button disabled="false">Still Disabled</button>.

Mengatur disabled properti tombol menonaktifkan atau mengaktifkan tombol. Nilai masalah properti .

Atribut HTML dan properti DOM bukan hal yang sama, bahkan ketika mereka memiliki nama yang sama.

Jawabannya sudah menjelaskan bagaimana atribut dan properti ditangani secara berbeda, tetapi saya benar-benar ingin menunjukkan betapa gilanya ini. Bahkan jika sampai batas tertentu spek.

Gila, memiliki beberapa atribut (misalnya id, kelas, foo, bar ) untuk mempertahankan hanya satu jenis nilai di DOM, sementara beberapa atribut (misalnya diperiksa, dipilih ) untuk mempertahankan dua nilai; yaitu, nilai "saat dimuat" dan nilai "keadaan dinamis". (Bukankah DOM seharusnya mewakili keadaan dokumen sepenuhnya?)

Sangat penting, bahwa dua bidang input , mis. Teks dan kotak centang berperilaku dengan cara yang sama . Jika bidang input teks tidak mempertahankan nilai "saat itu dimuat" dan nilai "saat ini, dinamis" yang terpisah, mengapa kotak centang? Jika kotak centang memang memiliki dua nilai untuk atribut yang diperiksa , mengapa tidak memiliki dua untuk atribut class dan id ? Jika Anda berharap untuk mengubah nilai bidang * input * teks , dan Anda mengharapkan DOM (yaitu "representasi serial") untuk berubah, dan mencerminkan perubahan ini, mengapa Anda tidak mengharapkan hal yang sama dari bidang input dari ketik kotak centang pada atribut yang diperiksa?

Perbedaan, dari "itu adalah atribut boolean" tidak masuk akal bagi saya, atau, setidaknya bukan alasan yang cukup untuk ini.

baik ini ditentukan oleh w3c apa itu atribut dan apa itu properti http://www.w3.org/TR/SVGTiny12/attributeTable.html

tetapi saat ini attr dan prop tidak begitu berbeda dan ada hampir sama

tetapi mereka lebih suka prop untuk beberapa hal

Ringkasan Penggunaan yang Diinginkan

Metode .prop () harus digunakan untuk atribut / properti boolean dan untuk properti yang tidak ada dalam html (seperti window.location). Semua atribut lainnya (yang dapat Anda lihat di html) dapat dan harus terus dimanipulasi dengan metode .attr ().

Yah sebenarnya Anda tidak perlu mengubah sesuatu jika Anda menggunakan attr atau prop atau keduanya, keduanya bekerja tetapi saya melihat dalam aplikasi saya sendiri bahwa prop bekerja di mana atrr tidak jadi saya mengambil 1,6 app prop =)

Perbedaan properti dan atribut HTML:

Pertama mari kita lihat definisi dari kata-kata ini sebelum mengevaluasi apa perbedaannya dalam HTML:

Definisi bahasa Inggris:

• Atribut mengacu pada informasi tambahan dari suatu objek.
• Properti menggambarkan karakteristik suatu objek.

Dalam konteks HTML:

Ketika browser mem-parsing HTML, itu menciptakan struktur data pohon yang pada dasarnya adalah representasi memori dari HTML. Ini struktur data pohon berisi node yang elemen HTML dan teks. Atribut dan properti yang berkaitan dengan ini adalah sebagai berikut:

• Atribut adalah informasi tambahan yang dapat kita masukkan ke HTML untuk menginisialisasi properti DOM tertentu.
• Properti terbentuk ketika browser mem-parsing HTML dan menghasilkan DOM. Setiap elemen dalam DOM memiliki set properti mereka sendiri yang semuanya diatur oleh browser. Beberapa properti ini dapat memiliki nilai awal yang ditetapkan oleh atribut HTML. Setiap kali properti DOM berubah yang memiliki pengaruh pada halaman yang dirender, halaman tersebut akan segera dirender kembali

Penting juga untuk menyadari bahwa pemetaan properti ini bukan 1 banding 1. Dengan kata lain, tidak setiap atribut yang kami berikan pada elemen HTML akan memiliki properti DOM bernama serupa.

Selanjutnya memiliki elemen DOM yang berbeda sifat yang berbeda. Misalnya, <input>elemen memiliki properti nilai yang tidak ada pada <div>properti.

Contoh:

Mari kita ambil dokumen HTML berikut ini:

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">  <!-- charset is a attribute -->
  <meta name="viewport" content="width=device-width"> <!-- name and content are attributes -->
  <title>JS Bin</title>
</head>
<body>
<div id="foo" class="bar foobar">hi</div> <!-- id and class are attributes -->
</body>
</html>

Kemudian kami memeriksa <div>, di konsol JS:

 console.dir(document.getElementById('foo'));

Kami melihat properti DOM berikut (chrome devtools, tidak semua properti ditampilkan):

• Kita dapat melihat bahwa id atribut dalam HTML sekarang juga merupakan properti id di DOM. Id telah diinisialisasi oleh HTML (walaupun kita bisa mengubahnya dengan javascript).
• Kita dapat melihat bahwa atribut kelas dalam HTML tidak memiliki properti kelas yang sesuai ( classdisediakan kata kunci dalam JS). Tapi sebenarnya 2 properti, classListdan className.