Apa perbedaan antara properti dan atribut dalam HTML?


408

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?


6
Kemungkinan duplikat .prop () vs .attr ()
Naftali aka Neal

Jawaban:


826

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.


1
Hai Sime, saya kira ini cukup ambigu, terutama jika Anda melihat di sini: w3.org/TR/html4/index/attributes.html , dan tidak ada jawaban yang jelas. Satu pada dasarnya perlu mengikuti apa yang dinyatakan dalam ringkasan di blog jQuery dan bahkan kemudian, yang satu akan memetakan ke yang lain dan bekerja di kedua contoh dengan sedikit kinerja hit jika Anda salah menggunakan prop ketika Anda perlu menggunakan attr
schalkneethling

4
@oss Tautan Anda merujuk ke daftar atribut HTML. Daftar itu tidak ambigu - itu adalah atribut.
Šime Vidas

apakah ada beberapa dokumen tentang hubungannya? @ ŠimeVidas
SKing7

3
Di mana saya dapat menemukan daftar atribut lengkap untuk properti (seperti for-> htmlFor) dan juga daftar properti yang mengambil nilai awal dari atribut, namun tidak mencerminkannya ( input.value). Saya berharap ini akan berada di suatu tempat di sumber perpustakaan seperti github.com/Matt-Esch/virtual-dom tetapi tidak benar-benar didokumentasikan.
sstur

1
@Pim Saya belum membacanya sendiri, tetapi seri artikel 4-bagian ini sepertinya merupakan sumber yang bagus: twitter.com/addyosmani/status/1082177515618295808
Šime Vidas

53

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.


Contoh ini tidak benar: colspanatribut memiliki colSpanproperti. ... Jadi, atribut mana yang tidak memiliki properti terkait sekarang?
Robert Siemer

46

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.


21
Ini bukan jawaban tapi saya setuju dengan Anda; ini benar-benar gila.
Samuel

Ya konsep ini payah dan tidak boleh distandarisasi dengan buruk. Ini adalah salah satu kasus (seperti innerHTML misalnya) yang bagus di IE lama dan harus diadopsi oleh standar. Properti dan atribut disinkronkan sedapat mungkin, bahkan atribut khusus, membuat sintaks js dot yang mudah dibaca. HTML5 membuat tag HTML kustom sebagai warga negara kelas satu, atribut khusus juga seharusnya. Fitur ini sedang dihapus karena IE lama masih merupakan masalah nyata - kami baru saja melihat banyak korporasi secara tradisional terjebak dengan IE untuk sistem lama sekarang menemukan mereka rusak di IE10.
mike nelson

48
Itu tidak gila. Anda salah paham. The checkedatribut diwakili oleh defaultCheckedproperti (juga untuk input teks valueatribut diwakili oleh defaultValueproperti). Properti kedua,, checkeddiperlukan untuk menyatakan apakah kotak centang dicentang karena ini adalah bagian intrinsik dari fungsi kotak centang: itu interaktif dan dapat diubah (dan diatur ulang ke default, jika tombol reset formulir ada) oleh pengguna , dengan cara atribut lain seperti idtidak. Ini tidak ada hubungannya dengan fakta bahwa itu adalah atribut boolean.
Tim Down

3
@TimDown - Terima kasih. Itu benar-benar membuat saya melewati WTF? punuk.
pedz

12
@TimDown Saya masih merasa itu "gila" karena pendekatan logis apa pun akan membuat nama properti dan nama atribut cocok, atau setidaknya tidak memiliki nama atribut dan nama properti yang tidak terkait (yaitu atribut yang diperiksa merujuk ke defaultChecked properti sementara properti yang diperiksa tidak terkait). Faktanya, pendekatan logis yang diasumsikan setiap orang adalah kasus di awal adalah tidak memisahkan atribut dan properti sama sekali. Atribut tidak boleh berubah, tetapi harus selalu mencerminkan nilai properti. Seharusnya tidak ada perbedaan antara keduanya.
dallin

10

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 =)


Hai Daniel, saya memang membacanya. Sepertinya ada yang tahu definisi yang jelas untuk memisahkan keduanya, karena beberapa dari apa yang Sime sebutkan di bawah ini juga dapat ditambahkan ke elemen HTML, misalnya alt. Akan terus membaca beberapa spesifikasi HTML dan melihat apakah memang ada cara untuk membedakan keduanya secara nyata.
schalkneethling

3
Dokumen itu terkait dengan SVG, bukan HTML.
Luzado

5

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):

properti dan atribut html

  • 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.
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.