Harta set data boleh digunakan untuk mendapatkan semula atribut data dengan lebih mudah. Untuk setiap atribut data tersuai, sifat ini mengembalikan objek DOMStringMap dengan hanya masukan. Konsep baca sahaja antara muka Elemen HTML memberikan kita cara membaca/menulis akses kepada atribut data tersuai (data-*) pada elemen yang ditentukan. Ia menawarkan peta rentetan (DOMStringMap) yang mempunyai entri untuk setiap harta data-*. Set data tersedia dalam DOM dan HTML.
Sintaks:
Sintaks diisytiharkan sebagai
element.dataset.key
Ini ialah penciptaan minimum set data.
Dataset HTML membenarkan pengguna mengakses data melalui jadual HTML konvensional dan penanda berstruktur lain. Set data HTML berfungsi sama dengan set data XML, kecuali set data tersebut boleh memanfaatkan berjuta-juta jadual yang telah wujud! Set data HTML adalah pengembangan yang jelas kerana kami meratakan XML ke dalam struktur jadual. Set data ialah sifat asli bagi elemen yang memegang atribut data; ia hampir tidak disokong dalam IE11+ dan Chrome 8+. Nilai item set data biasanya rentetan, walaupun data () jQuery menghormati jenis yang disediakan oleh. data (kunci, nilai). (Dataset mengembalikan DOMStringMap, manakala data() dalam jQuery mengembalikan objek jQuery.)
Set Data HTML
Pengguna boleh menggunakan jadual HTML biasa dan penanda berstruktur lain sebagai sumber data dengan set data HTML Spry. Set data HTML berfungsi sama dengan set data XML, kecuali set data boleh memanfaatkan berjuta-juta jadual yang tersedia. Set data HTML ialah pengembangan semula jadi Rangka Kerja Spry kerana kami meratakan XML ke dalam struktur jadual.
Dataset HTML disertakan dengan set utiliti yang boleh anda gunakan untuk mengubahnya.
- getURL() – Fungsi ini mengembalikan nilai URL semasa dalam fungsi dataset Object() { [kod asli] }.
- setURL(“URL”) – Fungsi ini menentukan laluan ke fail baharu yang akan digunakan dalam set data.
- getSourceElementID() – Mendapat ID elemen halaman yang menjadi asas set data.
- setSourceElementID(“theSourceID”) – Kaedah ini digunakan untuk menetapkan atau mengubah ID elemen halaman sumber data.
- getRowSelector() mengembalikan RowSelector yang sedang digunakan.
- setRowSelector(“theRowSelector”) Menetapkan RowSelector baharu untuk set data.
- getDataSelector() – Mengembalikan DataSeelctor semasa.
- setDataSelector(“theDataSelector”)-Menetapkan DataSelector baharu untuk set data.
Contoh
Untuk kod HTML yang sah
<li class="prod" data-name="Dove Shampoo" data-country="Oslo"
data-lang="js" data-types="Hair">
<b>Hello Users:</b> <span>A newly launched Items</span>
</li>
var u1 = document.getElementsByTagName("li")[0];
var p1 = 0, span = user.getElementsByTagName("span")[0];
var content = [
{name: "country", prefix: "Product exported "},
{name: "type", prefix: "utilizing on hair "},
{name: "lang", prefix: "hello Oslo "}
];
u1.addEventListener("click", function(){
var content = content [ pos++ ];
span.innerHTML = content.prefix + u1.dataset[ content.name ];
}, false);
Dalam coretan kod di atas, sifat set data berfungsi sama seperti sifat atribut. Kod ini boleh diperkaya menggunakan awalan seperti awalan kandungan yang berfungsi lebih baik pada masa hadapan. Kunci?boleh digunakan sebagai sifat objek set data untuk menetapkan dan membaca atribut, seperti dalam elemen. dataset.nama kunci. Sintaks kurungan sifat objek juga boleh digunakan untuk menetapkan dan membaca atribut, seperti dalam elemen. set data [nama kunci]. Operator in boleh digunakan untuk melihat sama ada atribut ada.
Atribut IDL set data menyediakan pengakses mudah untuk semua atribut data-* elemen (data-*/a>). Mendapatkan set data (dataset/a>) Atribut IDL mesti mengembalikan objek DOMStringMap yang dikaitkan dengan algoritma berikut, yang mendedahkan atribut ini pada elemennya:
<ahref="demo.html#domstringmap-0"> </a>
Beberapa perkara yang perlu diberi perhatian:
- Nama atribut tidak lagi diawali dengan awalan data.
- Sebarang tanda sempang yang didahului dengan huruf kecil dalam nama akan dihapuskan dan huruf selepasnya ditukar kepada huruf besar.
- Watak lain akan dibiarkan begitu sahaja. Ini bermakna mana-mana tanda sempang yang tidak diikuti dengan huruf kecil tetap sama.
Sokongan Penyemak Imbas
Set data tidak serasi dengan semua penyemak imbas (terutamanya versi Internet Explorer yang lebih awal). Mari lihat data keserasian yang dikemas kini dalam jadual:
| Support | Versions | |||
| Desktop | Chrome | Edge | Firefox | Internet Explorer |
| 6 and 8 | ?Yes | 6 higher | 9 | |
| Mobile | Android | Edge | Opera | Samsung |
| 6 | Yes | Nil | Nil | |
Spesifikasi /komen
Dalam HTML5, perkara telah berubah dalam usaha untuk menjadikan pembangunan halaman utama berasaskan standard lebih mudah, dan itu sepatutnya membuat perubahan besar. Oleh kerana keluk pembelajaran dan kadar kegagalan hanya markup berasaskan XML terlalu tinggi, atribut data telah dicipta sebagai cara untuk menggunakan pendekatan ini. Adalah penting untuk memahami bahawa atribut data tidak cuba menggantikan ruang nama atau perkara lain. Mereka memberikan alat yang diperlukan untuk *pengerahan* fungsi yang diterangkan di atas. Seseorang boleh menggunakan atribut data dalam HTML untuk mencapai RDFa, format yang canggih, dan juga beberapa jenis ruang nama. Aspek yang paling menarik dalam spesifikasi ini ialah pengguna tidak perlu menunggu mana-mana pelayar untuk melaksanakannya sehingga mereka boleh mula menggunakannya. Kami boleh yakin bahawa jika pengguna mula menggunakan awalan data pada metadata HTML hari ini, ia akan terus berfungsi pada masa hadapan.
Jalankan algoritma berikut untuk mendapatkan pasangan nilai nama DOMStringMap:
- Biar senarai sebagai senarai pasangan nilai nama yang kosong.
- Tambahkan pasangan nilai nama pada senarai untuk setiap atribut kandungan pada elemen berkaitan DOMStringMap yang lima aksara pertamanya ialah rentetan “data-” dan aksara yang selebihnya (jika ada) tidak menyertakan sebarang alfa atas ASCII, dalam perintahkan atribut tersebut disenaraikan dalam senarai atribut elemen.
Untuk standard HTML Asas – Ulasan Ulasan bukanlah perubahan tepat daripada HTML Terkini 5.1
Versi HTML 5?? – Ulasan Ulasan (Tiada perubahan dalam Standard sebelumnya)
Versi HTML 5.1 – Tiada kesan daripada HTML 5.
Kesimpulan – Set Data dalam HTML
Akhir sekali, atribut data tersuai ialah cara yang mudah untuk menyimpan data aplikasi pada halaman web. HTML5 kini membenarkan kami untuk memasukkan atribut data tersuai dalam semua komponen HTML. Sehingga pengenalan atribut ini, satu-satunya kunci untuk mencapai hasil yang serupa (menghubungkan data dengan elemen) ialah menggunakan kelas CSS dalam elemen.
Atas ialah kandungan terperinci Set data dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Apakah elemen HTML penting untuk menstrukturkan laman web?
Jul 03, 2025 am 02:34 AM
Struktur laman web perlu disokong oleh elemen HTML teras. 1. Struktur keseluruhan halaman terdiri daripada, yang merupakan unsur akar, yang menyimpan maklumat meta dan memaparkan kandungan; 2. Organisasi kandungan bergantung pada tajuk (-), perenggan () dan tag blok (seperti,) untuk meningkatkan struktur organisasi dan SEO; 3. Navigasi dilaksanakan melalui dan dilaksanakan, organisasi yang biasa digunakan dihubungkan dan ditambah dengan atribut aria-semasa untuk meningkatkan kebolehcapaian; 4. Borang Interaksi melibatkan, dan, untuk memastikan fungsi input dan penyerahan pengguna lengkap. Penggunaan unsur -unsur ini dapat meningkatkan kejelasan halaman, penyelenggaraan dan pengoptimuman enjin carian.
Mengendalikan penyambungan semula dan kesilapan dengan acara html5 pelayan-sent.
Jul 03, 2025 am 02:28 AM
Apabila menggunakan HTML5SSE, kaedah untuk menangani penyambungan semula dan kesilapan termasuk: 1. Memahami mekanisme penyambungan semula lalai. Eventsource Retrys 3 saat selepas sambungan terganggu secara lalai. Anda boleh menyesuaikan selang melalui medan semula; 2. Dengar peristiwa ralat untuk menangani kegagalan sambungan atau kesilapan parsing, membezakan jenis ralat dan melaksanakan logik yang sepadan, seperti masalah rangkaian yang bergantung pada penyambungan semula automatik, kesilapan pelayan secara manual melambatkan penyambungan semula, dan kegagalan pengesahan menyegarkan token; 3. Secara aktif mengawal logik penyambungan semula, seperti penutupan secara manual dan membina semula sambungan, menetapkan bilangan maksimum masa semula, menggabungkan navigator.online untuk menilai status rangkaian untuk mengoptimumkan strategi semula. Langkah -langkah ini dapat meningkatkan kestabilan aplikasi dan pengalaman pengguna.
Mengisytiharkan DOCTYPE HTML5 yang betul untuk halaman moden.
Jul 03, 2025 am 02:35 AM
Doctype adalah pernyataan yang memberitahu penyemak imbas yang standard HTML digunakan untuk menghuraikan halaman. Halaman web moden hanya perlu ditulis pada permulaan fail HTML. Fungsinya adalah untuk memastikan bahawa penyemak imbas menjadikan halaman dalam mod standard dan bukannya mod pelik, dan mesti terletak pada baris pertama, tanpa ruang atau komen di hadapannya; Hanya ada satu cara yang betul untuk menulisnya, dan tidak disyorkan untuk menggunakan versi lama atau varian lain; Lain -lain seperti charset, viewport, dan lain -lain harus diletakkan sebahagiannya.
Melaksanakan pengesahan borang klien menggunakan atribut HTML.
Jul 03, 2025 am 02:31 AM
Klien-sideformvalidationcanbedonewithoutjavascriptbyusinghtmlattributes.1) userequiredtoenforcemandatory.2) valateateMailsandurlSwithtypeattributeseMailorurl, orusepatternwithregexforcustmin.3)
Bagaimana cara kumpulan pilihan dalam lungsur turun pilih menggunakan HTML?
Jul 04, 2025 am 03:16 AM
Gunakan tag dalam HTML untuk pilihan kumpulan dalam menu drop-down. Kaedah khusus adalah untuk membungkus sekumpulan elemen dan menentukan nama kumpulan melalui atribut label, seperti: 1 mengandungi pilihan seperti epal, pisang, oren, dan lain -lain; 2. Mengandungi pilihan seperti wortel, brokoli, dan sebagainya; 3. Nota termasuk: ① Tiada sarang disokong; ② Seluruh kumpulan boleh dilumpuhkan melalui atribut yang kurang upaya; ③ Gaya ini terhad dan perlu dihidupkan dalam kombinasi dengan CSS atau perpustakaan pihak ketiga; Plug-in seperti SELECT2 boleh digunakan untuk meningkatkan fungsi.
Mengintegrasikan CSS dan JavaScript dengan berkesan dengan struktur HTML5.
Jul 12, 2025 am 03:01 AM
HTML5, CSS dan JavaScript harus digabungkan dengan tag semantik, pesanan pemuatan yang munasabah dan reka bentuk decoupling. 1. Gunakan tag semantik HTML5, seperti meningkatkan kejelasan struktur dan penyelenggaraan, yang kondusif untuk SEO dan akses bebas penghalang; 2. CSS harus diletakkan, gunakan fail luaran dan berpecah oleh modul untuk mengelakkan gaya sebaris dan masalah pemuatan yang tertunda; 3. JavaScript disyorkan untuk diperkenalkan di hadapan, dan gunakan penangguhan atau async untuk memuat secara asynchronously untuk mengelakkan menyekat rendering; 4. Mengurangkan pergantungan yang kuat antara ketiga-tiga, tingkah laku memandu melalui atribut data dan status kawalan nama kelas, dan meningkatkan kecekapan kerjasama melalui spesifikasi penamaan bersatu. Kaedah ini dapat mengoptimumkan prestasi halaman dengan berkesan dan bekerjasama dengan pasukan.
Melaksanakan butang yang boleh diklik menggunakan elemen butang HTML
Jul 07, 2025 am 02:31 AM
Untuk menggunakan elemen butang HTML untuk mencapai butang yang boleh diklik, anda mesti menguasai penggunaan asas dan langkah berjaga -jaga yang sama. 1. Buat butang dengan tag dan tentukan tingkah laku melalui atribut jenis (seperti butang, hantar, tetapkan semula), yang dikemukakan secara lalai; 2. Tambahkan fungsi interaktif melalui JavaScript, yang boleh ditulis dalam talian atau mengikat pendengar acara melalui ID untuk meningkatkan penyelenggaraan; 3. Gunakan CSS untuk menyesuaikan gaya, termasuk warna latar belakang, sempadan, sudut bulat dan kesan status hover/aktif untuk meningkatkan pengalaman pengguna; 4. Perhatikan masalah biasa: Pastikan atribut kurang upaya tidak didayakan, peristiwa JS terikat dengan betul, oklusi susun atur, dan gunakan bantuan alat pemaju untuk menyelesaikan masalah. Menguasai ini
Mengemukakan data borang menggunakan kaedah HTML5 baru (FormData)
Jul 08, 2025 am 02:28 AM
Lebih mudah untuk menghantar data borang menggunakan API FormData HTML5. 1. Ia secara automatik boleh mengumpul medan borang dengan atribut nama atau menambah data secara manual; 2. Ia menyokong penyerahan dalam format multipart/form-data melalui FETCH atau XMLHTTPREQUEST, yang sesuai untuk muat naik fail; 3. Apabila memproses fail, anda hanya perlu memasukkan fail ke FormData dan menghantar permintaan; 4. Perhatikan bahawa medan nama yang sama akan ditimpa, dan penukaran JSON dan tiada struktur bersarang perlu dikendalikan.
