1. Definisi
Properti: Properti, semua elemen HTML diwakili oleh tipe HTMLElement. Tipe HTMLELEMEN secara langsung mewarisi dari elemen dan menambahkan beberapa atribut. Atribut yang ditambahkan sesuai dengan masing -masing elemen HTML dengan 5 karakteristik standar berikut: ID, judul, Lang, Dir, ClassName. Node DOM adalah objek, sehingga dapat menambahkan properti dan metode khusus seperti objek JavaScript lainnya. Nilai properti dapat berupa tipe data apa pun, yang sensitif terhadap case, dan properti khusus tidak akan muncul dalam kode HTML, tetapi hanya ada di JS.
Atribut: Fitur, berbeda dari properti, atribut hanya dapat berupa string, case-tidak sensitif, muncul di innerHTML, dan semua atribut dapat terdaftar melalui atribut array kelas.
2. Kesamaan
Properti DOM standar disinkronkan dengan atribut. Atribut yang diakui (non-custom) ditambahkan ke objek DOM sebagai properti. Misalnya, ID, Align, Style, dll., Pada saat ini, properti dapat dioperasikan dengan mengoperasikan properti atau metode DOM seperti getAttribute () yang menggunakan karakteristik operasi. Namun, nama atribut yang diteruskan ke getAttribute () sama dengan nama atribut yang sebenarnya. Karena itu, ketika mendapatkan nilai karakteristik kelas, Anda harus lulus di "kelas".
3. Perbedaan
1). Untuk beberapa karakteristik standar, ada perbedaan dalam nilai yang diperoleh dengan getAttribute dan point (.). Seperti HREF, SRC, Value, Style, OnClick dan penangan acara lainnya.
2) .href: getAttribute mendapatkan nilai aktual href, sementara titik -titik mendapatkan url lengkap, yang memiliki perbedaan browser.
Salinan kode adalah sebagai berikut:
<script>
var a = document.body.children [0]
A.href = '/'
peringatan ('atribut:' + a.getAttribute ('href')) // '/'
alert ('properti:' + a.href) // yaitu: '/', orang lain: URL lengkap
</script>
Nilai SRC mirip dengan HREF, tetapi IE juga akan mengembalikan URL penuh;
Nilai nilai juga memiliki beberapa properti bawaan untuk sinkronisasi 'satu arah' (satu arah).
Misalnya, input.
Salinan kode adalah sebagai berikut:
<input type = "text" value = "markup">
<script>
var input = document.body.children [0];
input.setAttribute ('value', 'new');
peringatan (input.value); // 'baru', input.value berubah
peringatan (input.getatrriobute (nilai)); // 'baru'
</script>
Tetapi atribut tidak bisa mendapatkan sinkronisasi dari properti:
Salinan kode adalah sebagai berikut:
<input type = "text" value = "markup">
<script>
var input = document.body.children [0];
input.value = 'baru';
alert (input.getAttribute ('value')); // 'markup', tidak berubah!
</script>
GetAttribute mendapatkan nilai awal, sementara titik -titik mendapatkan nilai awal atau nilai .value yang dimodifikasi. Misalnya, ketika pengunjung memasukkan karakter tertentu, atribut 'Nilai' mempertahankan nilai asli setelah properti diperbarui. Nilai asli dapat digunakan untuk memeriksa apakah input berubah, atau untuk mengatur ulang.
Untuk penangan acara seperti Style dan OnClick, metode GetAttribute mengembalikan string saat diakses, sementara DOT mengembalikan objek yang sesuai dan fungsi penangan event.
Untuk properti yang diperiksa dalam input
Salinan kode adalah sebagai berikut:
<script>
var input = document.body.children [0]
waspada (input.checked) // true
alert (input.getAttribute ('checked')) // string kosong
</script>
GetAttribute mendapatkan nilai yang sebenarnya Anda atur. Poinnya mengembalikan nilai boolean.
Perbedaan kompatibilitas browser
1. Di IE <9 browser, Anda dapat menggunakan nomor DOT dan getAttribute untuk mengakses properti khusus antara satu sama lain.
2. IE <8 (termasuk mode kompatibilitas IE8 IE7), properti dan atributnya sama. Karena atribut tidak sensitif pada kasus, dalam kasus ini, saat menggunakan GetAttribute untuk mengakses fitur, browser akan memilih nilai yang muncul untuk pertama kalinya.
Salinan kode adalah sebagai berikut:
document.body.abba = 1 // Tetapkan properti (sekarang dapat membacanya dengan getAttribute)
document.body.abba = 5 // Tetapkan properti dengan kasus lain
// Harus mendapatkan properti bernama 'Abba' dengan cara yang tidak peka.
alert (document.body.getAttribute ('abba')) // 1
Properti Prioritas
Dalam aplikasi aktual, 98% operasi DOM menggunakan properti.
Hanya ada dua situasi yang membutuhkan penggunaan atribut
1. Kustomisasi atribut HTML karena tidak disinkronkan ke properti DOM.
2. Akses atribut HTML bawaan, yang tidak dapat disinkronkan dari properti. Misalnya, nilai nilai tag input.