Atribut dan properti elemen DOM mudah dicampur bersama dan tidak dapat dibedakan. Keduanya adalah hal yang berbeda, tetapi keduanya terkait erat. Banyak teman baru, termasuk saya di masa lalu, sering tidak memahaminya.
Atribut diterjemahkan ke dalam istilah Cina "karakteristik", dan properti diterjemahkan ke dalam istilah Cina "atribut". Dari makna literal orang Cina, memang ada sedikit perbedaan. Mari kita bicara tentang atribut dulu.
Atribut adalah node fitur. Setiap elemen DOM memiliki atribut atribut yang sesuai untuk menyimpan semua node atribut. Atribut adalah wadah dari kelas array. Tepatnya, itu adalah namenodemap. Singkatnya, ini adalah wadah yang mirip dengan array tetapi tidak sama dengan array. Setiap indeks numerik atribut menyimpan node atribut dalam bentuk pasangan nilai nama (name = "value").
Salin kode sebagai berikut: <div id = "box" gameid = "880"> halo </div>
Kode HTML dari elemen Div di atas mencakup kelas, ID dan GameID khusus. Fitur -fitur ini disimpan dalam atribut, mirip dengan bentuk berikut:
Salin kode sebagai berikut: [, id = "box", GameId = "880"]
Anda dapat mengakses node atribut seperti ini:
Salinan kode adalah sebagai berikut:
var elem = document.geteLementById ('box');
console.log (elem.attributes [0] .name); // kelas
console.log (elem.attributes [0] .value); // kotak
Namun, IE6-7 menyimpan banyak hal dalam atribut, dan metode akses di atas berbeda dari hasil pengembalian browser standar. Biasanya, Anda perlu mendapatkan node atribut dan menggunakan metode getAttribute secara langsung:
Salin kode sebagai berikut: console.log (elem.getAttribute ('GameId')); // 880
Untuk mengatur node atribut untuk menggunakan metode setAttribute, gunakan RemoveAttribute untuk menghapus:
Salinan kode adalah sebagai berikut: elem.setAttribute ('testAttr', 'testVal');
console.log (elem.removeattribute ('GameId')); // belum diartikan
Atribut akan diperbarui secara dinamis karena node atribut ditambahkan atau dihapus.
Properti adalah properti. Jika elemen DOM dianggap sebagai objek objek biasa, properti adalah properti yang disimpan dalam objek dalam bentuk pasangan nilai nama (name = "value"). Jauh lebih mudah untuk menambah dan menghapus properti, dan tidak ada bedanya dengan objek biasa:
Salinan kode adalah sebagai berikut:
elem.gameid = 880; // Menambahkan
console.log (elem.gameid) // dapatkan
hapus elem.gameid // hapus
Alasan mengapa atribut dan properti mudah dicampur bersama adalah bahwa banyak node atribut memiliki atribut properti yang sesuai, seperti ID dan kelas elemen div di atas keduanya adalah atribut dan properti yang sesuai, yang dapat diakses dan dimodifikasi tidak peduli metode mana yang digunakan.
Salinan kode adalah sebagai berikut:
console.log (elem.getAttribute ('id')); // kotak
console.log (elem.id); // kotak
elem.id = 'halo';
console.log (elem.getAttribute ('id')); // Halo
Tetapi untuk node atribut khusus atau properti khusus, keduanya tidak ada hubungannya satu sama lain.
Salinan kode adalah sebagai berikut:
console.log (elem.getAttribute ('GameId')); // 880
console.log (elem.gameid); // belum diartikan
elem.areaid = '900';
console.log (elem.getAttribute ('AreaD')) // null
Untuk IE6-7, tidak ada perbedaan antara atribut dan properti:
Salinan kode adalah sebagai berikut:
console.log (elem.getAttribute ('GameId')); // 880
console.log (elem.gameid); // 880
elem.areaid = '900';
console.log (elem.getAttribute ('AreaD')) // 900
Banyak pemula mungkin jatuh ke dalam lubang ini dengan mudah.
Beberapa node atribut umum dari elemen DOM memiliki atribut properti yang sesuai. Yang lebih istimewa adalah beberapa properti dengan nilai tipe boolean, seperti beberapa elemen bentuk:
Salinan kode adalah sebagai berikut:
<input type = "Radio" checked = "checked" id = "raido">
var radio = document.getElementById ('radio');
console.log (Radio.getAttribute ('checked')); // diperiksa
Console.log (Radio.Checked); // BENAR
Untuk node atribut khusus ini, hanya jika ada node ini, nilai properti yang sesuai adalah benar, seperti:
Salinan kode adalah sebagai berikut:
<input type = "Radio" diperiksa = "apapun" id = "raido">
var radio = document.getElementById ('radio');
console.log (Radio.getAttribute ('checked')); // apa pun
Console.log (Radio.Checked); // BENAR
Akhirnya, untuk membedakan antara atribut dan properti, pada dasarnya dapat diringkas bahwa node atribut terlihat dalam kode HTML, dan properti hanyalah atribut pasangan nilai nama biasa.
Salinan kode adalah sebagai berikut:
// Baik GameID dan ID adalah node atribut
// ID juga dapat diakses dan dimodifikasi melalui properti
<Div GameID = "880" id = "box"> halo </div>
// AreaD hanyalah properti
elem.areaid = 900;