Set data dalam HTML

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!